脚本宝典收集整理的这篇文章主要介绍了CSS将img图片填满父容器div并自适应容器大小,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法
<div> <img src="引入的图片地址" alt=""> </div>
方法一:对img元素垂直居中,并将它的高度和宽度设置一个最小满屏值
div{ posITion:relative; width: 100px; height: 100px; overflow:hidden; } div img{ position: absolute; top: 50%; left: 50%; display: block; min-width: 100%; min-height: 100%; transform:translate(-50%,-50%); }
方法二:设置img的css样式增加 object-fit:cover 类似于css3中背景图片的background-size: cover;
div{ width: 100px; height: 100px; } div img{ width: 100%; height: 100%; object-fit:cover; }
到此这篇关于CSS将img图片填满父容器div并自适应容器大小的文章就介绍到这了,更多相关CSS将img填满父容器 内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的CSS将img图片填满父容器div并自适应容器大小全部内容,希望文章能够帮你解决CSS将img图片填满父容器div并自适应容器大小所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。