img自适应父容器
很多讲解图片自适应的方法都是将图片作为容器的背景图,通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在div中的img,将img自适应它的父容器div。html结构:<div class="imgWrap"><img src="test.png"></div>首先需要图片在父容器中居中显示,使用flex布局.i...
·
很多讲解图片自适应的方法都是将图片作为容器的背景图,通过背景图的一些属性来设置实现自适应的功能。但有时候难免需要用到嵌套在div中的img,将img自适应它的父容器div。
html结构:
<div class="imgWrap">
<img src="test.png">
</div>
首先需要图片在父容器中居中显示,使用flex布局
.imgWrap{
display: flex;
justify-content: center;
align-items: center;
}
再针对img图片设置宽高,设置宽度100%或者高度100%,可以让图片跟随父容器依据宽度或者高度改变尺寸。如果同时设置宽度和高度为100%,会使图片拉伸填充整个父容器,这时候图片会有可能模糊失真。
更多推荐
已为社区贡献2条内容
所有评论(0)