Не могу понять, почему при уменьшении экрана изображение не сужается? Есть три img для примера. В первом варианте (card-1) с картинкой обвёрнутой в див - все понятно(для img max-width:100%, размер дива определяет размер контента, в моем случае картинка. И если для h2 нужно больше места для контента, при уменьш экрана, картинка сжимается - отдаёт место для h2. Все работает без grow и shrink) Но, если img не обернуть в див( примере card-2, card-3) при сужении экрана изображение не сужается?
codepenh
<div class="cards">
<div class="card card-1">
<div>
<img
class="card-image"
src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
width="1020"
alt="A cat"
/>
</div>
<h2 class="card-heading">
Card title 1 ffffffffffffffffffffffffffffff
</h2>
</div>
<div class="card card-2">
<img
class="card-image"
src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
width="1020"
alt="A cat"
/>
<h2 class="card-heading">
Card title 2 ffffffffffffffffffffffffffffff
</h2>
</div>
<div class="card card-3">
<img
class="card-image no-gap"
src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=320"
alt="A cat"
/>
<h2 class="card-heading">Card title 3</h2>
</div>
</div>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.5;
background-color: #f9f9fd;
}
.cards {
max-width: 1220px;
margin: 0 auto;
background-color: #f44356;
}
.card {
/* max-width: 320px; */
display: flex;
justify-content: center;
margin: 0 auto;
border-radius: 4px;
overflow: hidden;
background-color: #f44336;
box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
.card-image {
max-width: 100%;
height: auto;
}
.card-image.no-gap {
display: block;
}
.card-heading {
flex: 1;
margin: 0;
padding: 16px;
font-weight: 500;
background-color: #03a9f4;
}
.card + .card {
margin-top: 20px;
}
