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

Question

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

有什么想法吗？

Answer 1

如果您仅在图像上定义一个维度，则图像长宽比将始终保留。

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

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

如果图像的宽度和高度为 100%：自动，并且您认为它太高，那是因为纵横比被保留。您需要裁剪或更改纵横比。

请提供更多有关您具体想要实现的目标的信息，我将尽力提供更多帮助！

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

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

Answer 2

几年后，在寻找相同的需求时，我发现了一个使用背景大小的 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/cssref/css3_pr_background-size.asp

演示：http://www.w3schools.com/cssref/playit.asp？文件名=playcss_background-size

Answer 3

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

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

Answer 4

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

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

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

Answer 5

有同样的问题。对我来说，问题是 height 属性也已经在其他地方定义了，修复如下：

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

Answer 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%);

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

Answer 7

要尝试 100% 的宽度并强制使用最大高度而不扭曲纵横比，您可以添加一个 max-height 声明并结合 <代码>对象适合：包含。

width:100%;
max-height: 600px;
object-fit: contain;

Answer 8

答案之一包括我非常喜欢的 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/

Answer 9

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

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

所以，例如：

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

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

Answer 10

我将其用于高度和宽度固定但图像尺寸不同的矩形容器。

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

Answer 11

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

width: 100%;
height: auto;

Answer 12

这是一个非常简单的解决方案，是我在关注 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); />

Answer 13

不是要跳到一个老问题，但是...

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

尽管这不合适，因为您在高度上使用 !important 覆盖，但如果您使用像 WordPress 这样的 CMS 来为您设置高度和宽度，那么这很有效。

Answer 14

现代方法使用纵横比。

如果父级具有明确的尺寸，则可以使用嵌套纵横比来约束宽度和高度。

例如，如果有一个全屏页面，并且想要在其中间有一个方形棋盘，则可以使用此技术。

/* Stay smol, not absolutely needed*/
.constrain-container {
  display: flex;
  height: 100%;
}

.constrain-height {
  display: flex;
  min-width: 0;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  margin: auto;
  
  background-color: green;
}

.constrain-width {
  display: flex;
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  margin: auto;
  
  background-color: blue;
}

<!-- Resizable container, usually this would be a parent container with a fixed width and height -->
<div style="border: 1px solid black; resize: both; min-height: 30px; min-width: 30px; overflow: auto; ">
<div class="constrain-container">
<div class="constrain-height">
    <div class="constrain-width">My beautiful blue content is right here: Lorem ipsum</div>
  </div>
</div>
</div>

Answer 15

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

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

Answer 16

自 2023 年以来最简单的答案是使用 CSS 容器查询。这些让您说“这个元素是一个容器”，然后“使用容器的宽度/高度”。

.container {
  width: 100%;
  height: 100%;
  
  container-type: size;
}

.square {
  width: 100cqmin;
  height: 100cqmin;
  
  background: blue; /* for demo purposes */
}

<!-- Resizable container for demo -->
<div style="border: 1px solid black; resize: both; height: 80px; width: 300px; overflow: auto; ">

  <div class="container">
    <div class="square">
      My beautiful content is right here: Lorem ipsum
      <br>
      blabla
      <br>
      cats are cute
    </div>
  </div>
</div>

Answer 17

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

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

数字化变革正在进行中。