我有一些圖片卡，每個卡都有一個圖片和一些文字。這些卡片的大小由它們包含的影像的高度決定。如果視口寬度太小以至于影像的設定高度會使影像水平溢位，我希望影像縮小以使其留在卡/視口內
.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>我知道我可以使用媒體查詢，但我想知道是否有更好的方法來解決這個問題。
uj5u.com熱心網友回復：
我認為您必須使您的影像回應最大寬度。我認為這會有所幫助
img {
max-width:100%;
height: 13em;
}
uj5u.com熱心網友回復：
雖然您可以將 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>uj5u.com熱心網友回復：
有幾種方法可以使影像適合<div>.
img {
object-fit: cover;
}
CSS object-fit 屬性用于指定或應如何調整大小以適合其容器。
有關更多詳細資訊，請訪問此執行緒：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358491.html
上一篇：html5電子郵件驗證失敗