保持宽高比的图像最大高度和最大宽度

Question

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

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

如果没有 js 是不可能的，有没有人知道如何使用 js 并且在加载图像后不调整图像大小？

Answer 1

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

Answer 2

有一个名为 max-width 和 max-height 的内置 CSS 样式，我真的认为 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>

Answer 3

同时使用 width auto 和 height auto 将给出以下代码。为了水平居中，我使用了 flexbox 的对齐项目中心。

.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>

Answer 4

您必须对图像使用 max-width 和 height 以及 object-fit CSS 属性。请参见示例

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

<div class="img"><img src="https://Whosebug.design/assets/img/logos/so/logo-Whosebug.png"></div>

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

Answer 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">

Answer 6

您可以将图像嵌套在 200x38 容器中，然后将图像的 max-width 和 max-height 设置为 100%。这是一个工作片段（我已经包含了 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.

保持宽高比的图像最大高度和最大宽度

Image max height and max width while preserving aspect ratio

javascript

css

height

image

width