schematu flexbox - składowa pozioma z pełną wysokość kwadratu obraz

Question

staram się osiągnąć to, co wydaje się być bardzo proste zadanie ze schematu flexbox, ale po godzinach, ja nie ...

po prostu chcesz stworzyć reaguje pozioma komponent z obraz po lewej stronie, który zawsze ma 100% wysokość i pewną szerokość elastyczną tekst po prawej.

powinno być łatwe, ale obraz nie przestaje nakładających się w najlepszym przypadku ...

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

wystarczy dodać właściwość Flex .card-img

Więcej informacji na temat usługi Flex można znaleźć tutaj: 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

Użycie minimalnej szerokości dla kontenera obrazu.

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

W twoim przypadku, to impossiple aby prawo div mieć taką samą wysokość z obrazem, ponieważ:

height prawego div zależeć to witdh. Z powodu nadrzędnego elementu div ustalono width, więc width prawego div zależy od lewego diva width. Lewy podziałka width zależy od obrazu height. Kiedy zmienisz obrazek height, zmieni się również prawa div height. Teraz myślę, że najlepszym sposobem jest nadanie obrazowi rozmiaru 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>

Korzystanie siatkę można następnie dodać ograniczenie na wysokość elementów pierwszej kolumnie.