今天工作的时候看到前辈写的一段代码
.actCenterBox { position: relative; width: 100%; min-width: 1190px; overflow: hidden; }
.actCenterBoxContent { margin: 0 -365px; text-align: center; position: relative; }
外层的结构大致是这样
<body> <div> <div class="actCenterBox" > <div class="actCenterBoxContent"> ......
疑惑的就是第一个CSS语句，margin: 0 -365px; 大致结果就是图片在浏览器宽度变小之后，其宽高不会变小，问了一下公司的大神，给出的解释大致是这样 。
图片宽度一般是1920，而屏幕的最小宽度是1190 两者相减除以2，就得到了365。
设置margin: 0 -365px; 不仅可以把图片拉到最大的宽度，而且还能保证在浏览器宽度变小后不会改变图片的宽高
今天工作的时候看到前辈写的一段代码.actCenterBox { position: relative; widt...
1.图片宽度100%高度自适应问题 我需要图片宽度撑满，高度自适应，然而图片宽度撑满了屏幕，但是高度为0 小程序i...
1.平均分为3份，图片宽 根据 屏幕宽 自适应，图片宽高 根据 图片宽 的大小自适应,始终不会扭曲 图片...
在使用UILabel显示富文本的时候（包含图片），有图片的情况下图片宽高不能自适应，图片宽高自适应方法如下： de...
-(void)resetDetailHtml{//图片自适应宽高，只限制图片的最大显示宽度，这样就能做到自适应NS...
获取自适应图片大小
需求：figure元素能和它包含的图片一样宽，即内容根据图片自适应。 未自适应的效果： 文字比图片要宽得多 想要的...
参考:小技巧：Google图片搜索技巧两则1、google 图片搜索可以指定图片大小搜索使用方法：在输入搜索内容的...
前端入坑纪 21 美好的礼拜天，今天来个先前都有用到的图片自适应比例技巧，因为之前的文章中都用到过...... O...
对于H5页面，当我们对图片，只设置宽度，高度会根据图片库得图片得宽高比自适应高度，然后小程序里得图片只设置宽度，高...
本文标题：图片自适应小技巧
本文链接：https://www.haomeiwen.com/subject/njekjxtx.html
网友评论