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

时间:2018-08-17 09:59:02

标签: html css alignment

是否可以在其<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;找到了一种骇人听闻的方法,尽管这需要计算将图像移动到侧面或角落所需的确切像素数量。

2 个答案:

答案 0 :(得分:2)

您所期望的是不可能的,<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=""/>

答案 1 :(得分:0)

刚刚发布了问题,已经找到答案。您需要使用CSS属性object-fitobject-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=""/>