是否可以在不使用 js 的情况下在保持纵横比的同时为图像提供最大高度和最大宽度？例如，我希望图像的高度为 38px，宽度为 auto。如果宽度大于 200px，我希望宽度为 200px，高度为 auto。如果没有 js 是不可能的，有没有人知道如何使用 js 并且在加载图像后不调整图像大小？
6 回答
大话西游666
TA贡献1817条经验 获得超14个赞
您可以将图像嵌套在 200x38 容器中，然后将图像的max-width和设置为 100%。max-height这是一个工作片段（我已经包含 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的范围内。
陪伴而非守候
TA贡献1757条经验 获得超8个赞
这是我认为可行的解决方案的 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">
智慧大石
TA贡献1946条经验 获得超3个赞
您必须为图像使用max-width和heightCSSobject-fit属性。请参见示例
.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>
catspeake
TA贡献1111条经验 获得超0个赞
有一个名为max-widthand的内置 CSS 样式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>
慕无忌1623718
TA贡献1744条经验 获得超4个赞
同时使用 width auto 和 height auto 将给出以下代码。为了水平居中，我使用了 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>
四季花海
TA贡献1811条经验 获得超5个赞
指定高度或宽度将保持纵横比。同时指定 max-height 和 max-width 将保持纵横比。指定高度和最大高度没有意义。指定高度和最大宽度不能保证您的纵横比。
添加回答
举报
0/150
提交
取消