CSS：在保持纵横比的同时保持 100% 的宽度或高度？

Posted 2023-03-06

【中文标题】CSS：在保持纵横比的同时保持 100% 的宽度或高度？

【英文标题】：CSS: 100% width or height while keeping aspect ratio?

【发布时间】：2011-04-14 16:09:49

【问题描述】：

目前，使用 STYLE，我可以在高度上使用 width: 100% 和 auto（反之亦然），但我仍然无法将图像分别限制在特定位置，无论是太宽还是太高.

有什么想法吗？

【问题讨论】：

您能否发布链接或屏幕截图以显示问题的示例？

【参考方案1】：

如果您只在图像上定义一个维度，则图像纵横比将始终保持不变。

图片比您喜欢的更大/更高的问题吗？

你可以把它放在一个 DIV 中，该 DIV 设置为你想要的图像的最大高度/宽度，然后设置溢出：隐藏。这将裁剪超出您想要的任何内容。

如果图像的宽度和高度为 100%:auto，而您认为它太高，那具体是因为保留了纵横比。您需要裁剪或更改纵横比。

请提供更多关于您具体要完成的工作的信息，我会尽力提供更多帮助！

--- 根据反馈进行编辑 ---

您熟悉max-width 和max-height 属性吗？你总是可以设置那些。如果您没有设置任何最小值并且设置了最大高度和宽度，那么您的图像将不会失真（将保留纵横比），并且它不会大于最长并达到其最大值的任何尺寸。

【讨论】：

如果图像比宽高，我会使用 height=100% 和 ，如果图像比它高，我会使用 width=100%, height=汽车。我根本不知道是什么情况？按最大高度/宽度裁剪会起作用-但如果有办法不这样做-我宁愿使用它...

那么，您是在设计流动布局还是固定宽度布局？如果你在一个固定宽度的布局中，你总是可以将你的宽度设置为 100% 并且图像会适当地缩放，但它可能会非常高。您是要在文本块中放置图像，还是将其用作横幅或背景？如果您可以显示您计划使用它的页面或描述上下文，我可以为您提供更多帮助。参见上面的修改。

在我的 img 上使用 max-height 允许我在保持图像纵横比的同时限制图像

object-fit 没用？

object-fit 可能会裁剪图像并隐藏细节

【参考方案2】：

几年后，在寻找相同的要求时，我发现了一个使用 background-size 的 CSS 选项。

它应该可以在现代浏览器 (IE9+) 中运行。

<div id="container" style="background-image:url(myimage.png)">
</div>

还有风格：

#container

  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

参考：http://www.w3schools.com/cs-s-ref/css3_pr_background-size.asp

还有演示：http://www.w3schools.com/cs-s-ref/playit.asp?filename=playcss_background-size

【讨论】：

理想的解决方案，遗憾的是 IE8 不支持 :(

这是理想的解决方案，但如果您在轮播中执行此操作，则会导致图像在每张幻灯片后出现一秒钟的空白。

这对我来说是最好的解决方案。我们的堆栈：react + material UI

从 img 切换到 CSS background-image 对我有用，但我使用 contain，而不是 cover 用于 background-size — 否则我会丢失一些图像。

这根本不会扭曲图像，但您仍然需要明确设置 div 元素的宽度和高度。图像保持其纵横比，但元素本身不会

【参考方案3】：

通过将 CSS max-width 属性设置为 100%，图像将填充其父元素的宽度，但不会呈现大于其实际大小，从而保留分辨率。

将height 属性设置为auto 可保持图像的纵横比，使用此技术允许覆盖静态高度并使图像在所有方向上按比例弯曲。

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

【讨论】：

然而将height 设置为auto 会在图像浮动时导致回流

问题是在屏幕移动时，不是全高

【参考方案4】：

简单优雅的工作解决方案：

img 
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);

【讨论】：

感谢您提醒我object-fit。正是我需要的。

这是一个理想的解决方案，但不幸的是，截至 2017 年 3 月 28 日，任何版本的 IE 和 Edge 都不支持 object-fit。

截至 2019 年 3 月，此功能已获得 90% 的支持 - 所以这确实应该被视为正确答案。

另外，请注意 object-fit: contain 和 object-fit: cover 不喜欢 width 喜欢 100% - 你应该使用像 px 这样的混凝土单位

我尝试了 object-fit 与 max-width 和 max-height 在其他答案中使用，但这不起作用。即使使用width 和height 100%，这也适用于随机图像大小

【参考方案5】：

有同样的问题。对我来说问题是 height 属性也已经在别处定义了，像这样修复它：

.img
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;

【讨论】：

正是我想要的。谢谢一百万老兄。

完美的图像大小可以小于或大于父 div，并且它将被调整为具有最大宽度或最大高度的完美中心。您不必使用图像作为背景，如果设置为“覆盖”，则会溢出父级。

【参考方案6】：

简单的解决方案：

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

顺便说一句，如果你想在一个父 div 容器中居中，你可以添加那些 css 属性：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

它应该真的按预期工作:)

【讨论】：

赞成第一部分。第二部分对我不起作用... :(

只有一个问题 - 如果图像大于容器的 100%，它将溢出并需要滚动条或裁剪。不确定，如何达到相同的效果并仍然限制容器的最大尺寸。如果设置最大宽度和高度，则不再保留纵横比。

@JustAMartin 我遇到了同样的问题，容器很小且大小固定。宽度或高度 100% 与纵横比混淆。解决方案是使用 object-fit: contains，但这在 2020 年仅适用于 IE11 的 Edge 中不起作用。

【参考方案7】：

其中一个答案包括我非常喜欢的 background-size: contains css 语句，因为它直接说明了您想要做什么，而浏览器就是这样做的。

很遗憾，您迟早会需要应用 阴影，但不幸的是，它不能很好地与背景图像解决方案配合使用。

假设您有一个响应式的容器，但它有明确定义的最小和最大宽度和高度边界。

.photo 
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;

并且容器有一个img，它必须知道容器高度的像素，以避免得到一个非常高的图像溢出或被裁剪。

img 还应该定义 100% 的最大宽度，以便首先允许渲染更小的宽度，其次是基于百分比，这使其成为参数。

.photo > img 
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);

请注意，它有一个漂亮的阴影；）

在这个小提琴中享受一个活生生的例子：http://jsfiddle.net/pligor/gx8qthqL/2/

【讨论】：

干杯——正是我想要的。

感谢这个解决方案和 jsdfiddle 链接。这实际上适用于我的 react-image-gallery，我在其中使用了两者：具有更大高度的图像和具有更大宽度的图像。 :)

【参考方案8】：

我将它用于高度和宽度固定但图像大小不同的矩形容器。

img 
  max-width: 95%;
  max-height: 15em;
  width: auto !important;

【参考方案9】：

最好在应该尊重纵横比的维度上使用 auto。如果您不将其他属性设置为自动，现在大多数浏览器会假定您想要尊重纵横比，但不是所有的（例如，Windows Phone 8 上的 IE10 就不会）

width: 100%;
height: auto;

【参考方案10】：

这是我在关注 conca 的链接并查看背景大小后提出的一个非常简单的解决方案。它会放大图像，然后将其居中放置在外部容器中而无需缩放。

<style>
#cropcontainer

  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;

</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

【讨论】：

好又聪明的解决方案！用额外的 40% 补偿纵横比。谢谢！

您也可以只使用background-size: contain; 将图像放入背景中。

【参考方案11】：

不要跳入老问题，而是...

#container img 
      max-width:100%;
      height:auto !important;

即使在您使用 !important 覆盖高度时这不合适，但如果您使用 WordPress 等 CMS 为您设置高度和宽度，这很有效。

【参考方案12】：

现在可以使用 vw 和 vh 单位，它们代表 viewport 的 width 和 h8 的 1%分别。

https://css-tricks.com/fun-viewport-units/

所以，例如：

img 
  max-width: 100vw;
  max-height: 100vh;

... 将使图像尽可能宽，同时保持纵横比，但不会更宽或高于视口的 100%。

【参考方案13】：

使用 JQuery 左右，因为 CSS 是一种普遍的误解（这里关于简单设计目标的无数问题和讨论表明了这一点）。

CSS 不可能做你想做的事：图像的宽度应为 100%，但如果此宽度导致高度太大，则应应用最大高度 - 当然是正确的应保留比例。

【参考方案14】：

我想这就是你要找的东西，我自己也在找，但后来我又想起了它，因为我找到了代码。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

数字化发展正在进行中。