Flexbox的 - 全高的水平分量的平方圖像

Question

我試圖達到什麼似乎是一個很容易的事與Flexbox的，但小時後，我失敗了......

我只是想創建一個響應水平組件帶有左側的圖片誰總是100%高度和一些靈活的寬度文本在右邊。

應該很容易，但像永遠不會停止在最好的情況下重疊......

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

Answer 1

你只需要添加柔性財產.card-IMG

你可以在這裏瞭解更多關於flex屬性的信息：https://www.w3schools.com/cssref/css3_pr_flex.asp

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
    display: flex; //just add this line 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

Answer 2

使用對圖像容器的最小寬度。

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
    min-width: 130px; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 100%; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 0 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

Answer 3

在你的情況下，impossiple做出正確的DIV有因爲圖像相同的高度：

右div的height取決於它的witdh。由於父母的div已修復width所以右側div的width取決於左側div的width。左分區width取決於圖像height。所以當你改變圖像height，正確的div height也改變。現在，我認爲最好的方法是給圖像fixed大小。

body { 
 
    font-family: sans-serif; 
 
} 
 

 
.card { 
 
    background: #F1F1F2; 
 
    display: flex; 
 
} 
 

 
.card-img { 
 
    border: 1px solid green; 
 
} 
 

 
img { 
 
    display: block; 
 
    height: 130px; 
 
    width: auto; 
 
} 
 

 
.card-body { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    border: 1px solid blue; 
 
}

<div class="card"> 
 
    <div class="card-img"> 
 
    <img src="http://placehold.it/100x100" alt="Card image"> 
 
    </div> 
 
    <div class="card-body"> 
 
    <h4 class="card-title">Card title</h4> 
 
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

Answer 4

.card-grid{ 
 
    display: grid; 
 
    grid-template-columns: 200px auto; 
 
    grid-template-rows: 200px; 
 
    grid-gap: 0.5em; 
 
} 
 
.card-grid-img img{ 
 
    max-width: 200px; 
 
    height: 100%; 
 
    display: block; 
 
    width: auto; 
 
} 
 
.card-grid-body{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="card-grid"> 
 
    <div class="card-grid-img"> 
 
    <img src="http://www.salavaux.ch/222/5_sq.jpg" alt="Card image"> 
 
    </div> 
 
    <div class="card-grid-body"> 
 
    <h4 class="card-grid-title">Card title</h4> 
 
    <p class="card-grid-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit. Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
</div>

使用網格，那麼你可以加上高度的第一列元素的約束。