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

【问题标题】：How to align an image within an <img> tag?如何在 <img> 标签内对齐图像？
【发布时间】：2019-01-24 08:22:32
【问题描述】：

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

为了清楚起见，我确实不想要对齐<img>标签，而是该标签内的图像。

例子：

我有一张图片：

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

并为标签定义一个具体的尺寸：

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

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

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

【问题讨论】：

图片左上角对齐什么？
标签。
stackoverflow.com/questions/3348881/…的可能重复
img 标签是图片...
不，<img> 标签只包含图像。它也可以是<canvas> 元素。

标签： html css alignment

【解决方案1】：

你所期望的是不可能的，<img> 在一个标签中，它包含你的图像，里面没有任何东西。

如果我没记错的话，你会期待一些类似于下面的工作 sn-p 的东西，这在语义上是正确的

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>

[或] 您可以在img 标签中使用background-image，如下所示，希望对您有所帮助:)

#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;
}

&lt;img id="image" src="" alt=""/&gt;

【讨论】：

@Quentin 请看一下使用您自己的标记的第二个 sn-p，对 id css 进行少量修改，希望能回答您的问题:)
显然，there is a clean solution 无需将图像包装到容器元素或使用背景图像。

【解决方案2】：

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

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

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

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

&lt;img id="image" src="https://via.placeholder.com/200x100" alt=""/&gt;

【讨论】：

原来是我几年前在 MDN 上最初记录了这两个属性。 *脸红*再次绊倒这个用例时完全忘记了它们。