Question

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

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

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

Answer 1

有一种内置的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>

Answer 2

同时使用width auto和height auto将给出以下代码。为了使水平居中，我使用了flexbox的align-items中心。

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

您必须对图像使用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://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png"></div>

希望它能起作用...如果有任何问题评论，请

Answer 4

这里有两个我认为可行的解决方案示例，第一个图像的图像少于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 5

您可以将图像嵌套在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: 38px;
  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≤宽度≤200px 和 0px≤高度≤38px 的范围内。

Answer 6

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

图像最大高度和最大宽度，同时保留宽高比

6 个答案: