CSS图像大小，如何填充，不拉伸？

Question

CSS图像大小，如何填充，不拉伸？

我有一个图像，我想设置一个特定的宽度和高度（以像素为单位）

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

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

填充和拉伸图像的示例：

原始图片：

拉伸图像：

填充图片：

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

Answer 1

有三个不同之处：&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;*/}