div {
width: 100%;
position: relative; // 使用相对定位
height: 0; // 高度设置为0，使用padding来设置高度
overflow: hidden;
padding-bottom: 80%; // 使用padding-top也可，使用padding来撑高容器，高度为宽度80%
}
div img {
position: absolute; // 使用绝对定位
width: 100%; // 宽高为容器的宽高
height: 100%;
top: 0;
left: 0
}
<div>
<img src="http://blog.sina.com.cn/s/articlelist_5174220434_0_1.html"/>
</div>
优点：当图片加载不出来的时候，容器的位置不会消失；不需要使用js就能解决图片比例控制问题。
div { width: 100%; position: relative; // 使用相对定位 height: ...
1.AspectRaito可以设置子元素的宽高比 比如设置图片的宽高比 2.Card列表卡片效果ListView ...
实现瀑布流过程中使用glide来获取网络图片。现在有这么一个需求：根据图片的宽高比来设置ImageView的宽高比...
两者均以保持图像宽高比的形式缩放来适合背景容器的大小区别:在no-repeat的情况下cover:图片宽高比不变,...
App启动优化 App启动优化原理与技术方案 启动优化 黑白屏问题 启动页面主题设置为图片 启动页面，不要再onC...
开发中经常遇到给图片设置图片，图片的比例和UIButton 的宽高比例相同时是没什么问题的，图片不会因为被拉伸或者...
对于H5页面，当我们对图片，只设置宽度，高度会根据图片库得图片得宽高比自适应高度，然后小程序里得图片只设置宽度，高...
在图片的外层加个div， 样式设为： 默认给图片最外层设置了一个和图片一样宽高比的div占位就OK了，
官方文档中 mode="widthFix" 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自...
1:cocos2d-xd1屏幕适配解决方案？ 1.设置宽高比 2.设置设计分辨率尺寸和拉伸类型（ShowA...
本文标题：图片容器宽高比设置的优化方案
本文链接：https://www.haomeiwen.com/subject/lammoftx.html
网友评论