如何使 <img> 填充设置为 width: 100% 的 <div> 的整体；

Question

StackOverflow 社区。​​p>

我想要一张图片填满一个宽度为 100%、高度为 450 像素的盒子。

<div class="homepics">
  <img src="./homepic.jpg" alt="Home Picture" />
</div>

.homepics {
    width: 100%;
    height: 450px;
}

我已尽力寻找答案，但在示例中，我看到框始终具有确定的宽度和高度，这不适用于我的情况。或者，如果我知道如何使框占据查看者浏览器宽度的 100%，而不必使用 width 属性上的 100% 值，也许可以。

那么，如果我希望 homepic.jpg 适合我的 .homepics div，我该如何进行？

如果能提供任何帮助，我将不胜感激。

Answer 1

您可以将其用作背景图像，以便容器可以根据屏幕大小进行调整。不幸的是，如果图像的大小比例完全不同，它会裁剪掉部分图像。

以下示例中使用的图像是 350x150，但它被拉伸以填充 450 像素高的容器。

请注意，与容器相比，图像越小，它看起来就越模糊。对于 100% 屏幕宽度的背景，您需要大约 1440 像素到 1920 像素宽的高清图像。

.bg-container{
  width:100%;
  height:450px;
  background-image:url('http://via.placeholder.com/350x150');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

<div class="bg-container">
</div><!-- bg-container -->

Answer 2

这里有几个方法：

1) 设置图片为背景图片，大小为封面，覆盖整个div：

.homepics {
    width: 100%;
    height: 450px;
    background-image: url(your-jpg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

2) 如果您希望显示整个图像，无论容器如何，请尝试包含：

.homepics {
    width: 100%;
    height: 450px;
    background-image: url(your-jpg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

3) 如果您对图像变形没问题，您可以将其宽度和高度设置为 100% 并让它填满整个区域：

<img src="..." width="100%" height="450">

4) 如果你对两边的空间没问题，那么你基本上是在使用引导程序的 `.img-responsive' 类，就像这样：

img.img-responsive {
    width: auto;
    max-width: 100%;
    height: auto;
}

这将在图像的实际宽度处停止。如果你想让它超过那个，试试这个（在大显示器上它可能会变得模糊）：

img.img-responsive {
    width: 100%;
    max-width: 100%;
    height: auto;
}

其中一个选项应该可以工作。如果没有，请告诉我。