TA貢獻1817條經驗 獲得超14個贊
您可以將圖像嵌套在 200x38 容器中，然后將圖像的max-width和設置為 100%。max-height這是一個工作片段（我已經包含 JS 以使其具有交互性，但這不是必需的。嘗試使用滑塊調整容器的大?。?/p>
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>
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>
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 將保持縱橫比。指定高度和最大高度沒有意義。指定高度和最大寬度不能保證您的縱橫比。
舉報