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

Question

CSS图像大小，如何填充，不拉伸？我有一个图像，我想设置一个特定的宽度和高度（以像素为单位）但如果我使用css（width:150px; height:100px）设置宽度和高度，图像将被拉伸，它可能是丑陋的。如何使用CSS 将图像填充到特定大小，而不是拉伸它？填充和拉伸图像的示例：原始图片：拉伸图像：填充图片：请注意，在上面的填充图像示例中：首先，将图像调整为150x255（保持纵横比），然后将其裁剪为150x100。

Answer 1

有三个不同之处： 

1. 没有必要在元素上提供height和width属性，image因为它们将被样式覆盖。
   所以写这样的东西就足够了。

   <img class="cover" src="url to img ..."  />

2. 提供width:100%风格。
   如果您使用bootstrap并希望图像拉伸所有可用宽度，这将非常有用。
   

3. 指定height属性是可选的，您可以根据需要删除/保留该属性

   .cover {
      object-fit: cover;
      width: 100%;
      /*height: 300px;  optional, you can remove it, but in my case it was good */}