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

前端之家收集整理的这篇文章主要介绍了html – CSS你如何拉伸以适应和保持纵横比?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下css:
.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}@H_403_3@ 
 

这对应于这个HTML:

<div class="mod left"></div>@H_403_3@ 
 

这导致了这个混乱:

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

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

解决方法

这应该工作(在支持背景大小的浏览器中):
background-size: 175px auto;@H_403_3@ 
 

你也可以试试:

background-size: cover;@H_403_3@ 
 

要么:

background-size: contain;@H_403_3@ 
 

There’s a good explanation on MDC.

猜你在找的HTML相关文章