43

所以我想img显示

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

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

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

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

谢谢

4

5 回答 5

87

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

为了使它尽可能大，给它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;" >

于 2013-08-28T14:14:47.250 回答
6

您可以使用div带有背景图像的 a 和这个 CSS3 属性：

background-size: contain

您可以查看以下示例：

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

引用 Mozilla：

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

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

于 2013-08-28T14:15:52.397 回答
2

我来指出似乎没人在这里看到的答案。您可以使用纯 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 model。使用div设置为 100% 宽度和高度的父级，如下所示：

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

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

结论

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

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

于 2019-09-26T09:55:42.197 回答
1

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

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

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

    试试看 ：）

*目前仅在 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;
}
于 2018-12-20T13:45:38.110 回答
-2 
yourimg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

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

于 2013-08-28T14:16:02.100 回答