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