html – CSS你如何拉伸以适应和保持纵横比？

概述我有以下css： .mod.left {background-image: url("http://www.myimage.jpg");display: block;height: 160px;overflow: hidden;width: 175px;} 这对应于这个HTML： <div class="mod left"></div> 这导致了这个混乱： 如果我使用css3 back 我有以下CSS：

.mod.left {background-image: url("http://www.myimage.jpg");display: block;height: 160px;overflow: hIDden;wIDth: 175px;}

这对应于这个HTML：

<div ></div>

这导致了这个混乱：

如果我使用CSS3 background-size：175px 160px;长宽比真的搞砸了,造成这样的混乱：

有没有办法拉伸图像以适应一个div？但是在保持长宽比的方式中？我想要一个自动作物.

解决方法 这应该工作(在支持背景大小的浏览器中)：

background-size: 175px auto;

你也可以试试：

background-size: cover;

要么：

background-size: contain;

There’s a good explanation on MDC.

总结

以上是内存溢出为你收集整理的html – CSS你如何拉伸以适应和保持纵横比？全部内容，希望文章能够帮你解决html – CSS你如何拉伸以适应和保持纵横比？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。