介绍:有时我们放置图片时,因为父级元素固定了大小导致图片比例失调或者是图片被裁剪,体验非常不好。下面介绍一个简单的方法(初学者,欢迎大家提出建议)
HTML:
<div class="outer">
<img src="img/0117985b836f01a8012190f234ee4c.jpg@2o.jpg">
</div>
<div class="outer">
<img src="img/art-blue-sky-daylight-1251720.jpg">
</div>
<div class="outer">
<img src="img/v2-5935f8e9440aa3ada16fd70381c1cb41_r.jpg">
</div>
当CSS只这样写时:
.outer {
width: 100px;
height: 500px;
background-color: aquamarine;
margin: 20px;
}
图片随意摆放,有的被裁减,有的溢出父元素
实现自适应,我们给图片这样设置:
img {
max-width: 100%;
max-height: 100%;
}
为了方便观察,我给父元素加了float
再用flex布局实现垂直水平居中
.outer {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 500px;
background-color: aquamarine;
margin: 20px;
}
img {
max-width: 100%;
max-height: 100%;
}
实际应用时,将父元素的width: 100px;改成width: 100%;
图片根据屏幕会缩放