我試圖在 flex 容器中并排放置 3 個影像，但影像太大，它會拉伸頁面并創建滾動條。嘗試使用 flex wrap 的提示，但沒有用。我應該調整大小嗎照相館？
.
<section class="main-content">
<div class="image">
<img src="img/devil-ivy-can.jpg">
</div>
<div class="image">
<img src="img/krimson-princess-can.jpg">
</div>
<div class="image">
<img src="img/spiderwort-can.jpg">
</div>
</section>
.main-content{
display: flex;
}
div{
width:100%;
padding:10px;
margin:10px;
}
uj5u.com熱心網友回復：
嘗試這個
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
}
img {
width: 100%;
}
div {
flex: 1;
padding: 10px;
margin: 10px;
}
<section class="container">
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
<div class="image">
<img src="https://atlas-content1-cdn.pixelsquid.com/assets_v2/127/1273408777629996108/jpeg-600/G13.jpg">
</div>
</section>
uj5u.com熱心網友回復：
您好，我已嘗試解決您的問題，您可以在 CSS 代碼中嘗試此操作。
.main-content{
display: flex;
gap:10px
}
div{
width:100%;
gap:10px;
}div.image img{
width:100%;
object-fit:cover;
}<section class="main-content">
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
<div class="image">
<img src="https://www.imgonline.com.ua/examples/random-pixels-wallpaper.jpg">
</div>
</section>在 div 選擇器的 CSS 代碼中，我更喜歡使用間隙在專案之間留出空間，而不是使用填充和邊距
如果您將 img 寬度設為 100%，它將填充 div.image 并使用值覆寫設定 object-fit。CSS object-fit 屬性用于指定如何調整 or 的大小以適應其容器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529052.html
標籤：css图片弹性盒
上一篇：如何理解正則運算式的片段
下一篇：嘗試從部署在AppEngineStandard上的Symfony應用程式連接到CloudSQL時出現“連接被拒絕”