Image disappears if a responsive ratio is applied while it's nested in a flexbox

msrumon commented 2 years ago

Overview of the problem

This is about the Bulma CSS framework
I'm using Bulma version 0.9.3
My browser is: Chrome

Description

When I apply a responsive image ratios (is-XbyX classes) to an element having image class, and that element is nested in a flexbox (direct child), the image is disappeared.

Steps to Reproduce

Below is a sample snippet:

<section class="is-flex is-justify-content-space-between p-6">
  <figure class="image is-1by1">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
  <figure class="image is-1by1">
    <img src="https://bulma.io/images/placeholders/256x256.png">
  </figure>
</section>

Expected behavior

Images should respect the responsive behavior.

Actual behavior

Images are disappeared.

emkajeej commented 2 years ago

This is because flex items do not have an explicit size. Fixe by making the .image elements flex items (eg flex: 1).

Related, the .image component forces aspectratios by adding a percentual padding-top. Nowadays the css property aspect-ratio could be used with full browser support, except IE11.

TheWalkingSea commented 1 year ago

This is because flex items do not have an explicit size. Fixe by making the .image elements flex items (eg flex: 1).

Related, the .image component forces aspectratios by adding a percentual padding-top. Nowadays the css property aspect-ratio could be used with full browser support, except IE11.

Can you elaborate

emkajeej commented 1 year ago

On what part?

jgthms / bulma