css实现图片自适应容器宽高的做法一般如下所示
<style>
div{width: 200px; height: 200px}
div img{width: 100%; height: 100%}
</style>
<div>
<img src="xxxx.png" />
</div>
当外层容器的宽高比跟图片宽高比一致时到没啥问题，但在一些特定的业务场景，如九宫格图片展示时，展示的原始图片它们的大小，宽高比很有可能是不一样的，但外层容器的大小是固定的。此时如果按照上面的做法会导致图片被拉伸或者压缩。为了让图片显示的自然，我们可以让图片中的一部分去填充整个容器，虽然这样做无法让图片显示完整，但也避免了因图片的拉伸或压缩导致的变形。代码如下：
<style>
div{
width: 200px;
height: 200px;
background: url('xxxx.png') no-repeat;
background-size: cover;
background-position: center center;
}
</style>
<div></div>
已为社区贡献2条内容
所有评论(0)