图像最大高度和最大宽度，同时保持纵横比答案

【问题标题】：Image max height and max width while preserving aspect ratio图像最大高度和最大宽度，同时保持纵横比
【发布时间】：2021-02-09 17:13:07
【问题描述】：

是否可以在不使用 js 的情况下为图像提供最大高度和最大宽度，同时保持纵横比？

例如，我希望图像的高度为 38px，宽度为 auto。如果宽度大于 200px，我希望宽度为 200px，高度为 auto。

如果没有 js 是不可能的，有没有人知道如何用 js 做到这一点，并且在图像已经加载后不调整大小？

【问题讨论】：

标签： javascript css image height width

【解决方案1】：

指定高度或宽度将保持纵横比。同时指定最大高度和最大宽度将保持纵横比。指定高度和最大高度没有意义。指定高度和最大宽度不能保证您的纵横比。

【讨论】：

【解决方案2】：

有一个内置的 CSS 样式称为 max-width 和 max-height，我真的不认为 min-width 存在，以防你想知道。您可以参考下面的示例以更好地理解。另外我使用的是文本而不是图像，但你应该明白。

我已经嵌套了实际的 div 而不是另一个 div，因此您可以调整大小。

#con {
  resize: both;
  overflow: auto;
  
}

#box {
  /*Here you could say auto instead*/
  height: 200px;
  max-width: 200px;
}

<!DOCTYPE html />
<html>

<head></head>

<body>
  <div id="con">
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dapibus auctor ipsum, in convallis mi lobortis in. Phasellus molestie suscipit rutrum. Duis et convallis lectus. Etiam id urna massa. Nulla sagittis erat nec arcu rutrum elementum. Vestibulum blandit erat vestibulum, ullamcorper augue vitae, accumsan mi. Sed consectetur, quam vel efficitur interdum, ante ligula interdum justo, a dictum ligula tortor sed nunc. Cras eget magna ac urna imperdiet laoreet eget sed ante. Vivamus condimentum tortor sit amet diam elementum malesuada sed sed neque. Vestibulum et magna mollis, consequat nibh ut, facilisis orci. Phasellus fermentum sodales libero, et vehicula enim ornare ut. Donec non bibendum metus. Cras hendrerit, quam a pellentesque varius, tortor nunc maximus lectus, at gravida diam ipsum ut metus. Etiam orci felis, dapibus id cursus eu, dapibus ut augue. Proin a leo viverra, tempus ipsum nec, lacinia lacus. Maecenas id dolor nec neque lobortis interdum quis quis nisi.</div>
  </div>
</body>

</html>

【讨论】：

【解决方案3】：

同时使用宽度自动和高度自动将给出以下代码。为了水平居中，我使用了 flexbox 的 align-items center。

.container,
.container * {
  box-sizing: border-box;
}
.container {
  display: flex;
  width: 800px;
  margin: 10px auto;
}
.img {
  display: flex;
  align-items: center;
  width: 25%;
  height: 150px;
  border: 2px solid silver;
}
.img img {
  display: block;
  border: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: auto;
}

<div class="container">
  <div class="img">
    <img src="http://placekitten.com/200/300" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/300/200" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/250/350" alt="">
  </div>
  <div class="img">
    <img src="http://placekitten.com/350/200" alt="">
  </div>
</div>

【讨论】：

【解决方案4】：

您必须使用 max-width 和 height 和 object-fit 图像的 CSS 属性.. 查看示例

.img img {
  max-width: 200px; 
  height: 38px;
  object-fit: contain;
  object-position: left;
}

&lt;div class="img"&gt;&lt;img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"&gt;&lt;/div&gt;

希望它有效...如果有任何问题请评论

【讨论】：

谢谢，您的解决方案非常优雅，几乎适合我，但我需要使用 IE11，并且那里不支持 css 属性。

【解决方案5】：

这里有 2 个我认为可行的解决方案示例，第一个图像小于 width: 200px;，第二个图像大于 width: 200px;

再说一次，我不确定它是否适合你，但我认为它会，如果不是，我很想知道原因。

<style>
  img {
    max-width: 200px;
    height: auto;
  }
</style>

<img src="https://dummyimage.com/180x400/666/fff.jpg" alt="test">

<br>

<img src="https://images.pexels.com/photos/5686476/pexels-photo-5686476.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="test 2">

【讨论】：

谢谢，但您的解决方案不能解决宽度低于 200 像素时的精确高度问题

【解决方案6】：

您可以将图像嵌套在 200x38 的容器中，然后将图像的 max-width 和 max-height 设置为 100%。这是一个有效的 sn-p（我已经包含了 JS 以使其具有交互性，但这不是必需的。尝试使用滑块调整容器的大小）：

var width = document.getElementById("width");
var height = document.getElementById("height");

var widthInput = document.getElementById("widthInput");
var heightInput = document.getElementById("heightInput");

var imageContainer = document.querySelector("div");

widthInput.addEventListener("input", function() {
  width.innerHTML = this.value + "px";
  imageContainer.style.width = this.value + "px";
});

heightInput.addEventListener("input", function() {
  height.innerHTML = this.value + "px";
  imageContainer.style.height = this.value + "px";
});

div {
  width:  200px;
  height: 200px;
  border: 1px dashed #000;
}

.image {
  display:    block;
  max-width:  100%;
  max-height: 100%;
  background: #333;
}

<div>
  <img class="image" src="https://via.placeholder.com/400"/>
</div>

<br/>

<label>Width: <span id="width">200px</span></label>
<br/>
<input id="widthInput" type="range" min="0" max="400"/>
<br/>
<label>Height: <span id="height">200px</span></label>
<br/>
<input id="heightInput" type="range" min="0" max="400"/>

您会注意到，无论您如何更改容器的尺寸，图像仍然包含在其中。通过将容器设置为 200px 宽 x 38px 高，您可以强制图像保持在 0px ≤ width ≤ 200px 和 0px ≤ height ≤ 38px 的限制范围内。

【讨论】：