css实现图片自适应容器宽高

最新推荐文章于 2024-05-22 14:34:14 发布

George_Fal

最新推荐文章于 2024-05-22 14:34:14 发布

阅读量1.1w

点赞数 1

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/cc4zj/blog/3005043

版权

为什么80%的码农都做不了架构师？>>>

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>

转载于:https://my.oschina.net/cc4zj/blog/3005043