响应式图片全屏居中 - 保持纵横比，不超出窗口大小

Question

所以我想要一个img尽可能大地显示，

• 在横向时充满整个宽度，在纵向时充满整个高度
• 没有裁剪
• 没有倾斜或拉伸（保持原始纵横比）
• 垂直和水平居中

此外，图片的原始尺寸是未知的。

我已经尝试了不少方案来实现这一点，包括使用 flexbox（为了获取垂直居中），但没有一种方法可以完全符合所有条件。

理想情况下，当然希望这是一个全 CSS 解决方案，但我也一直在研究一些 JS 方案。

谢谢

- sanjaypoyzer

---

展示一些代码。"我尝试了一些东西，但它并没有起作用"并不是很有用。 - cimmanon

Answer 1

为让它居中，你可以使用这里展示的技巧：居中绝对定位。

为使其尽可能大，给它设置max-width和max-height都为100%。

为保持长宽比（即使像下面代码片段中明确设置了宽度），按照这里所述使用object-fit。

.className {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

<img src="https://i.imgur.com/HmezgW6.png" class="className" />

<!-- Slider to control the image width, only to make demo clearer !-->
<input type="range" min="10" max="2000" value="276" step="10" oninput="document.querySelector('img').style.width = (this.value +'px')" style="width: 90%; position: absolute; z-index: 2;" >

- Itay

---

太棒了，谢谢，这个完美地运作了。我想我之前没试过是因为我以为它会拉伸它，但是那些最大设置的工作方式很酷。 - suryanaga

如果你想让一个较小的图像拉伸到容器的边缘，可以添加 zoom: 10（10应该足够），以使图像更小。 - Pandaiolo

如果图像比屏幕小，则不会拉伸到屏幕大小。有什么办法可以实现这一点？ - Straw Hat

@Pandaiolo：缩放是无意义的，它不是有效的CSS属性。而且它在Firefox中也不起作用。 - Pointer Null

max-height和max-width不能增加图像的尺寸。如果您的图像很小，它们将保持小。原帖作者要求图像能够缩放以填充视口。 - Xavier

Answer 2

您可以使用带有背景图片的 div，并使用这个CSS3属性：
background-size: contain
你可以在以下网站上查看示例：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain
引用Mozilla的话来说：

contain值指定了无论包含盒子的大小如何，背景图像都应该缩放，使得每一边尽可能大而不超过容器相应边的长度。

请记住，如果 div 大于您的原始图像，则您的图像将被放大。

- dcro

---

无法这样做，因为图像必须通过PHP加载到HTML中。 - suryanaga

这是一个非常适合各种应用的好选择，因为你可以通过转换获得一些很棒的效果。但对于OP的请求来说，使用它的一个缺点是你会失去img标记。如果你像我一样，那么你希望你的图片能够被搜索引擎优化，并且在社交媒体中嵌入链接时能够展现出所有酷炫的效果。 - Xavier

Answer 3

我来指出似乎没有人注意到的答案。您可以使用纯CSS实现您所提出的所有请求，这非常简单。只需使用媒体查询即可。媒体查询可以检查用户屏幕或视口的方向。然后，您可以根据方向样式化您的图像。

只需像这样设置图像的默认CSS：

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

然后使用一些媒体查询来检查您的方向，就这样！

@media (orientation: landscape) { img { height:100%; } }
@media (orientation: portrait) { img { width:100%; } }

您将始终获得一个适合屏幕的图像，不会失去纵横比，不会比屏幕更大，也不会剪切或溢出。

要了解更多关于这些媒体查询的信息，您可以阅读MDN规范。

居中

要在水平和垂直方向上居中您的图像，只需使用flex box模型。使用父级div设置为100％宽度和高度，如下所示：

div.parent {
   display:flex;
   position:fixed;
   left:0px;
   top:0px;
   width:100%;
   height:100%;
   justify-content:center;
   align-items:center;
}

通过将父级div的display设置为flex，元素现在已准备好使用弹性盒模型。 justify-content属性设置弹性项的水平对齐方式。 align-items属性设置弹性项的垂直对齐方式。

结论：

我也曾想要这些确切的要求，并在网络上搜寻了纯CSS解决方案。由于这里的答案都没有满足您的所有要求，要么是通过变通方法实现，要么是放弃其中一两个要求，所以这个解决方案对于您的目标来说确实是最直接的，因为它通过纯CSS满足了您的所有要求。

编辑：如果您的图像很小，则接受的答案似乎只能起到作用。尝试使用小图像，您会发现它们永远不能大于其原始大小。

- Xavier

---

我刚意识到这个问题已经有6年的历史了。 我认为媒体查询并不那么老。 - Xavier

Answer 4

经过多次尝试，我发现这解决了我的问题。它用于通过浏览器在电视上显示照片。

• 保持照片的纵横比
• 垂直和水平缩放
• 垂直和水平居中

• 唯一需要注意的是非常宽的图像。它们会被拉伸填充，但不会太多，标准相机照片不会改变。

  试一试吧 :)

*目前仅在Chrome中进行了测试

HTML：

<div class="frame">
  <img src="image.jpg"/>
</div>

CSS：

.frame {
  border: 1px solid red;

  min-height: 98%;
  max-height: 98%;
  min-width: 99%;
  max-width: 99%;

  text-align: center;
  margin: auto;
  position: absolute;
}
img {
  border: 1px solid blue;

  min-height: 98%;
  max-width: 99%;
  max-height: 98%;

  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

- James Siebert

---

这种方法会扭曲图像，改变宽高比。原帖要求保持宽高比。 - Xavier

Answer 5

yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

并确保其中没有带有 position: relative 属性的父级标签

- Vladimir

---

这会将图像拉伸到我的测试窗口的宽度。 - suryanaga