html - html 中的图像框自动定位图像

Question

我有这个图片框，可以显示用户上传的图片:

<img src = "./imgs/..imagenamehere..." style = "background-size:cover; width:357px; height:357px;"

我把 background-size:cover 放在那里是因为我希望图像框在图像不是 1x1 大小时自动调整图像，这样它就不会拉伸(stretch)图像，也不会增加图像框的大小尺寸。

然而，当显示长肖像图像时，图像框会自动调整图像方向，使图像看起来像站立而不是原始肖像位置。

有什么办法可以解决这个问题吗？

Answer 1

你要的是object-fit CSS 属性，很遗憾，在 IE and Edge 中尚不支持:

img {
  width: 100px;
  height: 100px;
  border: 1px solid #dedede;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}

<img src="http://lorempixel.com/100/300" class="contain">
<img src="http://lorempixel.com/100/300" class="cover">