TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊
您可以將圖像嵌套在 200x38 容器中，然后將圖像的max-width和設(shè)置為 100%。max-height這是一個(gè)工作片段（我已經(jīng)包含 JS 以使其具有交互性，但這不是必需的。嘗試使用滑塊調(diào)整容器的大?。?/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"/>
您會(huì)注意到，無(wú)論您如何更改容器的尺寸，圖像仍包含在其中。通過(guò)將容器設(shè)置為 200px 寬 x 38px 高，您可以強(qiáng)制圖像保持在0px ≤ width ≤ 200px和0px ≤ height ≤ 38px的范圍內(nèi)。
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
這是我認(rèn)為可行的解決方案的 2 個(gè)示例，第一個(gè)圖像小于width: 200px;，第二個(gè)圖像大于width: 200px;
再一次，我不確定它是否適合你，但我認(rèn)為它會(huì)，如果它不會(huì)，我很想知道為什么。
<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貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊
您必須為圖像使用max-width和heightCSSobject-fit屬性。請(qǐng)參見(jiàn)示例
.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貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
有一個(gè)名為max-widthand的內(nèi)置 CSS 樣式max-height，我真的不認(rèn)為min-width存在，以防你想知道。您可以參考下面的示例以更好地理解。此外，我使用的是文本而不是圖像，但你應(yīng)該明白了。
我嵌套了實(shí)際的 div 而不是另一個(gè) div，這樣您就可以調(diào)整大小了。
#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貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊
同時(shí)使用 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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
指定高度或?qū)挾葘⒈３挚v橫比。同時(shí)指定 max-height 和 max-width 將保持縱橫比。指定高度和最大高度沒(méi)有意義。指定高度和最大寬度不能保證您的縱橫比。
舉報(bào)