html之CSS 如何拉伸(stretch)以适应和保持纵横比

98°冷暖 阅读:692 2023-11-05 18:46:41 评论:0

我有以下 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 background-size: 175px 160px;纵横比真的搞砸了,导致像这样一团糟:

有没有办法拉伸(stretch)图像以适应 div?但是以保持纵横比的方式?我想要自动裁剪。

请您参考如下方法:

这应该有效(在支持 background-size 的浏览器中):

background-size: 175px auto; 

你也可以试试:

background-size: cover; 

或者:

background-size: contain; 

There's a good explanation on MDC.


标签:CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们