响应式图像全屏和居中 - 保持纵横比，不超过窗口

Posted 2023-03-06

【中文标题】响应式图像全屏和居中 - 保持纵横比，不超过窗口

【英文标题】：Responsive Image full screen and centered - maintain aspect ratio, not exceed window

【发布时间】：2013-08-31 16:05:11

【问题描述】：

所以我想显示一个img

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

此外，图像的原始大小是未知的。

我为此尝试了很多不同的选项，包括一个 flexbox 选项（以获取垂直中心），但似乎没有任何选项可以勾选所有选项。

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

谢谢

【问题讨论】：

显示一些代码。 “我尝试了一些东西，但没有用”不是很有用。

【参考方案1】：

要使其居中，您可以使用此处显示的技术：Absolute centering。

为了让它尽可能大，给它max-width 和max-height 的100%。

要保持纵横比（即使在下面的 sn-p 中专门设置了宽度），请使用 object-fit，如 here 所述。

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

【讨论】：

太棒了，谢谢，这很好用。我想我没有尝试这个，因为我认为它会拉伸它，但是这些最大设置的工作原理很酷。

如果你想要一个较小的图像拉伸到容器的边框，也可以添加zoom: 10（10 应该足够了）。

如果图像比屏幕小，它不会拉伸到屏幕大小。？我该怎么做才能做到这一点？

@Pandaiolo：缩放是无稽之谈，它不是有效的 css 属性。而且它不起作用（在 FF 中）。

max-height 和 max-width 不会增加图像的尺寸。如果您的图像很小，它们将保持很小。 OP 要求提供可缩放以填充视口的图像。

【参考方案2】：

您可以使用带有背景图片的div 和此 CSS3 属性：

background-size: contain

您可以查看以下示例：

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

引用 Mozilla 的话：

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

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

【讨论】：

不能这样做，因为图像必须用 php 加载到 html 中。

这是各种应用程序的绝佳选择，因为您可以通过过渡获得一些简洁的效果。将其用于 OP 请求的一个缺点是您丢失了 img 标记。如果您像我一样，那么您希望您的图片用于 SEO，以及社交媒体在嵌入您网站的链接时对您的页面所做的所有很酷的事情。

【参考方案3】：

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

并确保没有包含 position: relative 的父标签

【讨论】：

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

【参考方案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;

【讨论】：

这种方法会使图像倾斜，改变纵横比。 OP 要求保持纵横比。

【参考方案5】：

我来指出似乎没人在这里看到的答案。您可以使用纯 CSS 满足您提出的所有请求，而且非常简单。只需使用Media Queries。媒体查询可以检查用户屏幕或视口的方向。然后，您可以根据方向设置图像样式。

只需像这样在图像上设置默认 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's specs。

居中

要将图像水平和垂直居中，只需使用flex box model。使用父 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 满足您的所有要求。

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

【讨论】：

我才意识到这个问题已经 6 岁了。不要认为媒体查询已经过时了。