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

Question

所以我想显示一个img

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

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

我为此尝试了很多不同的选项，包括flexbox选项（以获得垂直中心），但似乎没有什么能勾选所有选项。

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

感谢

Answer 1

要使其居中，可以使用此处显示的技术：绝对居中。

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

要保持纵横比（即使像下面的代码段中那样专门设置了宽度），请使用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的规范。

居中

要使图像水平和垂直居中，只需使用柔性框模型。使用设置为100%宽度和高度的父div，如下所示：

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

将父div的display设置为flex后，该元素现在可以使用flex box模型了。justify-content属性设置弹性项目的水平对齐方式。align-items属性设置弹性项的垂直对齐方式。

结论

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

编辑：只有当你的图片很大时，接受的答案才会出现。试着使用小图像，你会发现它们永远不会大于原来的大小。

Answer 4

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

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

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

  试试看：）

*到目前为止只在铬中进行了测试

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

并确保其中没有位置为relative的父标记