Flexbox - thành phần ngang với chiều cao đầy đủ phương ảnh

Question

Tôi cố gắng để đạt được những gì có vẻ là một nhiệm vụ rất dễ dàng với flexbox, nhưng sau giờ làm, tôi thất bại ...

Tôi chỉ muốn tạo ra một đáp ứng ngang thành phần có một hình ảnh ở bên trái luôn có chiều cao 100% và một số chiều rộng linh hoạt văn bản ở bên phải.

nên được dễ dàng, nhưng hình ảnh không bao giờ dừng lại chồng chéo trong trường hợp tốt nhất ...

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

bạn chỉ cần thêm tài sản flex để .card-img

Bạn có thể tìm hiểu thêm về thuộc tính flex tại đây: 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

Sử dụng chiều rộng tối thiểu cho vùng chứa hình ảnh.

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

Trong trường hợp của bạn, nó là impossiple để làm cho div đúng có cùng chiều cao với hình ảnh vì:

Các height của div đúng phụ thuộc vào nó là witdh. Vì div cha đã cố định width nên số width của div bên phải phụ thuộc vào số div width của div bên trái. Div bên trái width phụ thuộc vào hình ảnh height. Vì vậy, khi bạn thay đổi hình ảnh height, quyền div height cũng thay đổi. Bây giờ, tôi nghĩ cách tốt nhất là cung cấp cho hình ảnh kích thước 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>

Sử dụng lưới sau đó bạn có thể thêm một hạn chế trên các yếu tố cột đầu tiên chiều cao.