html - 拉伸图像以适应 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），那么这不是问题。但是如果实际的图像文件不是正方形的，那么显示的 Web 图像会拉伸到 div 的高度和宽度的 100%（在本例中为 200 像素）。

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

score 25 · Accepted Answer

你在混合符号。它应该是：

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

（注意，没有px）。或者：

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

（使用样式属性）样式属性可以替换为以下 CSS：

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

或者

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

score 5 · Accepted Answer

您可以使用百分比来代替设置绝对宽度和高度：

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

score 4 · Accepted Answer

或者你可以放入 CSS，

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

score 0 · Accepted Answer

高度属性会将图像拉伸到其原始分辨率之外吗？如果我有一个高度为 420 像素的图像，我无法让 css 将图像拉伸到原始分辨率之外以填充视口的高度。

我得到了非常接近的结果：

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

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

4 回答 4