基本上我有一個布局，其中我在一個帶有 display:flex 的父級中有 3 個元素。
<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>
我不應該scroll在任何方向。這個想法是中間的div：
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
.titleContainer占用and之間的剩余空間.buttonContainer，這就是它具有該flex-grow:1屬性的原因。
問題是如果我放一個<img/>有垂直和水平滾動的問題，
如果我放置任何其他元素，這不會發生。
如何使影像不會導致滾動問題并適應可用空間？我需要知道如何使用<img/>.
非常感謝你
html,body{
padding:0px;
margin:0px;
height:100%;
}
*{
box-sizing: border-box;
}
img{
margin:0px;
padding:0px;
}
.flex{
display:flex;
border:1px solid red;
flex-direction:column;
height:100vh;
}
.titleContainer{
border:1px solid blue;
}
.buttonContainer{
border:1px solid green;
}
.imageContainer{
flex-grow:1;
}<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>uj5u.com熱心網友回復：
您需要添加max-width到影像中，以便它適應其容器的大小。只需將其添加到您的 CSS 中：
.imageContainer img {
max-width: 100%;
display: block;
height: auto;
}
uj5u.com熱心網友回復：
您可以使用媒體查詢來縮小影像的大小。在 css 部分添加以下內容
@media all and (max-width: 1024px) and (min-width: 768px){
img{
width:200px; //or something like this. Change the size of the image.
}
}
這里有更多關于媒體查詢的詳細資訊 - https://css-tricks.com/css-media-queries/
uj5u.com熱心網友回復：
你總是必須為照片定義width和height有時你不需要定義height你只需要設定width:100%;它會回應
html,body{
padding:0px; margin:0px; height:100%;
}
*{
box-sizing: border-box;
}
img{
margin:0px; padding:0px; width:100% !important;
}
.flex{
display:flex; border:1px solid red; flex-direction:column; height:100vh;
}
.titleContainer{
border:1px solid blue;
}
.buttonContainer{
border:1px solid green;
}
.imageContainer{
flex-grow:1;
}<div class="flex">
<div class="titleContainer">Title</div>
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/465722.html
標籤：css