Question

是否可以在其<img>标签内对齐图像？

请清楚一点，我不是要对齐<img>标签，但要对齐该标签内的图像。

示例：

我有一张图片：

<img id="image" src="image.png" alt=""/>

并为标签定义一个特定的大小：

#image {
  width: 300px;
  height: 200px;
}

尽管image.png只有200 x 100像素大。如何在<img>标签的左上角对齐它？

我已经通过使用text-align: left; vertical-align: top;和display: flex; justify-content: start; align-items: start;的CSS以及通过使用align="top left"的HTML进行了尝试。
我通过box-sizing: border-box; padding: 0 0 100px 100px;找到了一种骇人听闻的方法，尽管这需要计算将图像移动到侧面或角落所需的确切像素数量。

Answer 1

您所期望的是不可能的，<img>位于一个标签中，该标签用于保存您的图像，里面没有任何东西。

如果我没记错的话，那么您期望的是与以下工作片段类似的东西，这在语义上是正确的

figure {
 width: 300px;
 height: 200px;
 border: 1px solid #000;
}

<figure>
  <img src="https://via.placeholder.com/100.png/369/fff" alt="Image" width="100" height="100">
</figure>

[OR] 您可以在background-image标记内使用img，如下所示，希望对您有所帮助：）

#image {
  width: 300px;
  height: 200px;
  display: block;
  border: 1px solid #000;
  background: url("https://via.placeholder.com/100.png/369/fff") no-repeat 0 0;
}

<img id="image" src="" alt=""/>

Answer 2

刚刚发布了问题，已经找到答案。您需要使用CSS属性object-fit和object-position。

说明：图像是被替换的元素，属性的图像允许影响被替换元素的大小和位置。

因此将图像定位在左上角的操作如下：

#image {
  width: 300px;
  height: 200px;
  border: 1px solid black;
  object-fit: none;
  object-position: top left;
}

<img id="image" src="https://via.placeholder.com/200x100" alt=""/>

如何在<img/>标签内对齐图像？

2 个答案: