我有一些圖片卡，每張都有一個圖片和一些文字。這些卡片的大小由它們包含的圖像的高度決定。如果視口寬度太小以至於圖像的設置高度會使圖像水平溢出，我希望圖像縮小以使其留在卡/視口內
.card {
width: fit-content;
max-width: 100%;
background-color: lightgray;
padding: 1em;
}
img {
height: 13em;
}<div class="card">
<img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" alt="random image...">
</div>我知道我可以使用媒體查詢，但我想知道是否有更好的方法來解決這個問題。
雖然您可以將 img 的最大寬度設置為視口寬度，但如果高度固定，這將扭曲圖像。
為了確保寬度永遠不會超過視口寬度並且高度永遠不會超過 13em，此代碼段為寬度和高度提供了最大值。並且它沒有明確設置高度。
注意：它通過設置 box-sizing:border-box 並刪除任何瀏覽器默認邊距和填充來將填充 + img 保留在視口中。
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.card {
width: fit-content;
max-width: 100vw;
background-color: lightgray;
padding: 1em;
}
.card img {
max-height: 13em;
max-width: calc(100vw - 2em);
}
</style>
<div class="card">
<img src="https://picsum.photos/id/1016/4000/500" alt="random image...">
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句