在边框内包含图形图像

Question

以下代码

<figure style="">

    <img src="https://i.stack.imgur.com/z0tkb.png">

</figure>

样式参数应位于上方，这样the image会按比例调整大小，但不会被裁剪为留在缩略图类型250 * 250正方形之内。

PS：以下裁剪图像：

width: 250px;
height: 250px;
border-style: solid;
border-width: thick;
object-fit: contain;
contain: content;

Answer 1

赋予图像ng serve --host 192.168.1.2 --open和width: 100%属性以使其具有响应性。它将调整大小以填充其父度量。

Answer 2

这是您想要的吗？

<figure style="text-align: center; width: 250px; height: 250px; border-style: solid; border-width: thick; object-fit: contain; contain: content;">
    <img src="https://i.stack.imgur.com/z0tkb.png" style="height: 100%;">
</figure>