将图片拉伸以适应Div的100％高度和宽度

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？

- Lloyd Banks

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%;
}

- bfavaretto

Answer 2

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

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

- dodgerogers747

---

而且，如果您的图像紧挨着DOM树下面，请使用直接子选择器 #mydiv > img - 这是一个重要的性能优化。请记住，浏览器（以及大多数库，如jQuery）从右到左读取CSS。 - pilau

Answer 3

或者你可以在CSS中添加：

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

- Haze811

Answer 4

height属性会将图像拉伸到超出其本机分辨率吗？如果我有一个高度为420像素的图像，我无法使用CSS将图像拉伸超出本机分辨率以填充视口的高度。

我正在使用以下方法获得非常接近的结果：

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

100vh 已经非常接近了，但底部还剩下一些像素，原因不明。

- Jerritt Pace