Question

StackOverflow社区。

我希望图片能够填充100％宽度和450像素高度的整个盒子。

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

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

我尽力找到答案，但在示例中我看到盒子总是有一个确定的宽度和高度，这不适用于我的情况。或者也许它可以，如果我知道如何使盒子占用观众浏览器宽度的100％而不必使用宽度属性的100％值。

所以，如果我想让homepic.jpg适合我的.homepics div，我该怎么办？

我很感激你的帮助。

Answer 1

您可以将其用作背景图像，以便容器可以调整到屏幕大小。不幸的是，如果它具有截然不同的尺寸比，它会裁掉部分图像。

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

请注意，与容器相比，图像越小，显示的图像越模糊。对于100％屏幕宽度的背景，您需要一个大约1440px到1920px宽的高清图像。

.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）如果你对任何一方的空间都没问题，那么你实际上是在使用bootstrap的`.img-responsive＆＃39; class，就像这样：

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

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

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

其中一个选项应该有效。如果没有，请告诉我。

如何使<img/>填充设置为宽度的整个<div>：100％;

2 个答案: