Question

我有这个显示用户上传图像的图像框：

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

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

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

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

Answer 1

你想要的是object-fit CSS属性，但遗憾的是IE and Edge尚不支持：

>>> lista = ['H', 'A', 'C', 'K', 'HA', 'HC', 'HK', 'AC', 'AK', 'CK']
>>> sorted(lista, key=lambda x: (len(x), x))
['A', 'C', 'H', 'K', 'AC', 'AK', 'CK', 'HA', 'HC', 'HK']

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

Answer 2

background-size:cover;

正如名称所示，

仅适用于背景图像。以下示例

div {
  height:200px;
  width: 200px;
  background-image: url("http://placehold.it/350x150");
  background-repeat: no-repeat;
  background-size:cover;
  background-position: 50% 50%;
}

<div></div>

Answer 3

在此代码中，您要添加和图像，但您没有在其上应用CSS。您正在背景图像上应用CSS。

在CSS中使用此代码

background-image : url (' < Path of image you want to show > ');
background-size : contain; <!-- You can use 'cover' also but see what you want it to look like -->

如果您使用background-size : cover;，那么如果您的图片没有合适的宽高比，那么它将被放大以覆盖您展示它的所有区域，如果您使用background-size : contain;那么它将会在该区域显示您的图像，其最大可能尺寸可以使图像的高度和宽度适合内部。如果您有任何疑问，请发表评论

html中的图像框自动定向图像

3 个答案: