CSS图像大小,如何填充,不拉伸?

CSS图像大小,如何填充,不拉伸?

我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度,图像将被拉伸,它可能是丑陋的。

如何使用CSS 图像填充到特定大小,而不是拉伸它?

填充和拉伸图像的示例:

原始图片:

https://img1.mukewang.com/5d5f9c5500012cfd02420363.jpg

拉伸图像:

https://img2.mukewang.com/5d5f9c570001d44401500100.jpg

填充图片:

https://img4.mukewang.com/5d5f9c590001d36a01500100.jpg

请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100。



潇湘沐
浏览 2408回答 3
3回答

慕勒3428872

有三个不同之处:&nbsp;没有必要在元素上提供height和width属性,image因为它们将被样式覆盖。所以写这样的东西就足够了。<img&nbsp;class="cover"&nbsp;src="url&nbsp;to&nbsp;img&nbsp;..."&nbsp;&nbsp;/>提供width:100%风格。如果您使用bootstrap并希望图像拉伸所有可用宽度,这将非常有用。指定height属性是可选的,您可以根据需要删除/保留该属性.cover&nbsp;{ &nbsp;&nbsp;&nbsp;object-fit:&nbsp;cover; &nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;/*height:&nbsp;300px;&nbsp;&nbsp;optional,&nbsp;you&nbsp;can&nbsp;remove&nbsp;it,&nbsp;but&nbsp;in&nbsp;my&nbsp;case&nbsp;it&nbsp;was&nbsp;good&nbsp;*/}
打开App,查看更多内容
随时随地看视频慕课网APP