html - 拉伸(stretch)图像以适应 100% 的 Div 高度和宽度

Question

我有一个带有以下 CSS 的 div

#mydiv{
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

我的 HTML 看起来像这样

<div id = "mydiv">
    <img src = "folder/file.jpg" width = "200px" height = "200px">
</div>

无论实际图像的分辨率如何，我都希望我的网络图像始终具有相同的大小(纵横比为 1:1)。如果我的实际图像文件是正方形的(比例为 1:1)，那么这不是问题。但是，如果实际图像文件不是正方形，则显示的网络图像会拉伸(stretch)到 div 高度和宽度的 100%(在本例中为 200 像素)。

如何获得适合我的 DIV 的不同图像尺寸？

Answer 1

你在混合符号。应该是:

<img src="folder/file.jpg" width="200" height="200">

(注意，没有 px)。或者:

<img src="folder/file.jpg" style="width: 200px; height: 200px;">

(使用 style 属性)样式属性可以替换为以下 CSS:

#mydiv img {
    width: 200px;
    height: 200px;
}

或

#mydiv img {
    width: 100%;
    height: 100%;
}