响应式图像全屏居中 - 保持宽高比，不超出窗口

Question

所以我想要显示一个

img

• 尽可能大（横向时填充宽度/纵向时填充高度）
• 没有作物
• 无倾斜或拉伸（原始纵横比）
• 垂直和水平居中

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

我为此尝试了很多不同的选项，包括弹性盒选项（以获得垂直中心），但似乎没有什么可以满足所有条件。

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

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;" >

Answer 2

您可以使用带有背景图像的

div

和此 CSS3 属性：

background-size: contain

您可以查看以下示例：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

引用 Mozilla 的话：

contain值指定无论包含框的大小如何，背景图像都应该缩放，使得每条边都尽可能大，同时不超过容器对应边的长度。

但是，请记住，如果

div

大于原始图像，您的图像将会放大。

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 盒模型。使用父级

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

属性设置 Flex 项目的水平对齐方式。

align-items

属性设置 Flex 项目的垂直对齐方式。

结论

我也想要这些确切的要求，并在网上搜索了纯 CSS 解决方案。由于这里的所有答案都无法满足您的所有要求，无论是通过解决方法还是牺牲一两个要求，这个解决方案确实是实现您目标的最直接的解决方案；因为它用纯 CSS 满足您的所有要求。

编辑：只有当您的图像很大时，接受的答案才会出现。尝试使用小图像，您会发现它们永远不会大于原始尺寸。

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

Answer 5

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

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