Doesn't resize image properly when parent is a flex item
With 3 images in a row, the middle will at narrower screen width's also shrink its height.
Code sample here: https://stackoverflow.com/q/45815720/2827823
CSS .category-block {
max-width: 768px; margin: 0 auto; overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
HTML
Workaround here: https://stackoverflow.com/a/45816799/2827823
CSS .category-block {
max-width: 768px; margin: 0 auto; overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */ @supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
HTML
With 3 images in a row, the middle will at narrower screen width's also shrink its height.
Code sample here: https://stackoverflow.com/q/45815720/2827823
CSS
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
HTML
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
----------------------------------------------------------------------------------------------------
Workaround here: https://stackoverflow.com/a/45816799/2827823
CSS
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
@supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
HTML
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>