拉伸图像以适应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），那么这不是问题。但是如果实际的图像文件不是正方形，那么显示的网络图像会延伸到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%;
}

Answer 3

或者你可以放入CSS，

<style>
div#img {
  background-image: url(“file.png");
  color:yellow (this part doesn't matter;
  height:100%;
  width:100%;
}
</style>

Answer 4

height属性是否可以将图像拉伸到超出其原始分辨率？如果我的图像高度为420像素，则无法使CSS将图像拉伸到超出原始分辨率以填充视口的高度。

我得到的结果非常接近：

 .rightdiv img {
        max-width: 25vw;
        min-height: 100vh;
    }

100vh越来越接近，由于某种原因，底部仅剩几个像素。