用div元素将img包裹住，采用padding-top属性可以使图片自适应缩放
<img src="/images/example.jpg" class="" />
<div class="pic">
<img src="/images/example.jpg" />
</div>
<style>
/* 可以把以下写入到通用css中，随时引用 */
.pic{
possition:relative;
overflow:hidden;
padding-top:50%;(即图片宽高比例为50%)
}
.pic img{
position:absolute;
top:50%;
transform:translateY(-50%);(图片上下居中)
width:50%;
}
</style>
用div元素将img包裹住，采用padding-top属性可以使图片自适应缩放
参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法
1.平均分为3份，图片宽 根据 屏幕宽 自适应，图片宽高 根据 图片宽 的大小自适应,始终不会扭曲 图片...
在使用UILabel显示富文本的时候（包含图片），有图片的情况下图片宽高不能自适应，图片宽高自适应方法如下： de...
CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示...
多栏CSS3 使用css3来创建多栏，它可以自适应网页，不兼容IE 用CSS包裹内容很长的URL和文本 这个代码片...
-(void)resetDetailHtml{//图片自适应宽高，只限制图片的最大显示宽度，这样就能做到自适应NS...
以下是通过学习《css3揭秘》，进而引申学习并总结的css3自适应4个关键字的思维导图。 接下来逐个demo： 一...
获取自适应图片大小
需求：figure元素能和它包含的图片一样宽，即内容根据图片自适应。 未自适应的效果： 文字比图片要宽得多 想要的...
本文标题：CSS3图片自适应
本文链接：https://www.haomeiwen.com/subject/yuuloftx.html
网友评论