拉伸图像以适应100%的Div高度和宽度

Question

我有一个div与以下CSS

#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),那么这不是问题.但是如果实际的图像文件不是正方形,那么显示的网络图像会延伸到div的高度和宽度的100%(在这种情况下为200px).

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

Answer 1

你正在混合符号.它应该是:

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

(注意,没有px).要么:

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

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

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

要么

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

Answer 2

您可以使用百分比，而不是设置绝对宽度和高度：

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