Question

我需要图像占据容器的整个宽度，除非得到的高度大于可用容器的视口高度。

基本上我希望图像能够响应，但它仍然适合屏幕。如果它不适合屏幕，则应按比例缩小，水平居中，最好在其两侧添加黑色瓷砖。

目前，我的CSS类看起来像这样：

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

我试图在图像上或者在专用容器上玩最大高度，纯粹的CSS似乎没有什么可以做的。

澄清：

我事先并不知道图片尺寸，因此无法将它们放入预设尺寸的容器中。
基本上，我的目标是让图像在屏幕上始终完全可见（如果您滚动到图像）并占据尽可能大的表面。

以下是一个更详细的例子：

我们说我有可滚动的容器，内容很多。容器占据整个视口宽度（让它说是500px），容器的可用可见高度是整个视口高度减去导航栏高度（让我们说1000px）。

我事先无法知道容器的可见尺寸是什么，因为它总是可以改变。

在容器内部，无论是文本，图像等等。

现在，对于给定的图像，这里有可能的场景：

如果图像是500x800，则应按原样显示，因为它占用了整个可用宽度，并且高度不大于容器的可见高度。
如果图像为500x2000，则应缩小至250x1000 并水平居中。这将占据整个可见容器的高度，并保持图像的纵横比
如果图像为250x300，则应放大至500x600，占用整个可用宽度
如果图像为200x500，则应放大至400x1000，占用整个可用高度
如果图像为1000x1000，则应缩小至500x500，占用整个可用宽度

Here's a JSFiddle explaining the problem

Answer 1

我建议不要使用IMG标签。而是使用div标签，然后使用背景图像属性。以下是此代码，将容器大小设置为您喜欢的任何内容：

<div id="container"></div>

<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;

</style>

background-size: contain是最好的。它将图像缩放到div中最大的图像，而不会使其大于其原始大小。希望这有帮助

编辑：忘了添加它，如果你想让它在容器的中心，这样当图像不适合容器的整个大小时，它周围有空白区域，你使用css代码background-position: center center;

Answer 2

您可以使用父容器的height: 100%（在我的情况下是img-holder）。并将text-align: center应用于父级。像：

.img-holder {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  text-align: center;
}

.img-holder img {
  height: 100%;
}

请看下面的代码：

＆＃13;

.img-holder {
  width: 100px;
  height: 100px;
  border: 1px solid #555;
  text-align: center;
}

img {
  height: 100%;
}

＆＃13;

<div class="img-holder">
  <img src="http://placehold.it/100x200" alt="">
</div>

＆＃13;

希望这有帮助！

Answer 3

您需要的主要是为img元素提供两个属性{max-width:100%}和{height: auto}

如果您全屏打开下面的代码段并调整窗口大小（注意：图片大小是随机选择的）

你会看到他们玩得多好。它们坚持最大宽度，并且不会向任何方向过度拉伸。

我在其中添加了一些代码，以便更容易展示

喜欢制作图片{display:block}和{padding-bottom}

＆＃13;

body {
  background: #131418;
  text-align: center;
  color: white;
  font-size: 25px;
}
body,
.image-container,
.image-container img,
.smalldiv {
  max-width: 100%;
}
.image-container img {
  height: auto;
  display: block;
  padding-bottom: 1em;
}
.smalldiv {
  /*for demnostration only */
  width: 600px;
  background: darkblue;
}
.smalldiv,
.image-container img {
  margin: 0 auto;
}

＆＃13;

<h3>Images will always keep their aspect ratio and they will always adhere to the width of their parent containers.</h3>
<hr>

<div class="image-container">
  <h4>This is what the image container looks like when it has the entire screen space</h4>
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/650x150">
  <img src="http://placehold.it/950x150">
  <img src="http://placehold.it/1250x3150">
  <img src="http://placehold.it/350x150">
  <img src="http://placehold.it/450x350">
  <img src="http://placehold.it/550x650">
  <img src="http://placehold.it/650x950">
  <img src="http://placehold.it/1250x1150">
</div>
<div class="smalldiv">
  <div class="image-container">
    <h4>This is what the image containing div looks when it's put inside a container smaller then the screen width</h4>
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/650x150">
    <img src="http://placehold.it/950x150">
    <img src="http://placehold.it/1250x3150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/450x350">
    <img src="http://placehold.it/550x650">
    <img src="http://placehold.it/650x950">
    <img src="http://placehold.it/1250x1150">
  </div>
</div>

＆＃13;

Answer 4

evilgenious448答案非常接近，只是它仅适用于背景图片。我所拥有的是：

<html>
<head>
<style>
    body {
        margin: 0px;
    }

    .holder {
        background-image: url('image1.JPG');
        background-size: contain;
        background-position: center center;
        width: 100vw;
        height: 100vh;
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
    <div class="holder">
        <div class="inner">
        </div>
    </div>
</body>
</html>

我不知道如何将内部div与图像的大小相等。

Answer 5

最好也是最简单的方法是使用vh和vw属性。 vh设置为100时占用完整的视口高度，宽度与vw相同。此外，可以添加最大高度属性以使图像停止超出其原始尺寸。

用于使图像响应包含元素

5 个答案: