Keeping responsive images to no larger than their natural size in the Bulma flexbox-based CSS framework

Playing around in the browser, in Firefox’s inspector, width: -moz-fit-content fixed it for me. Searching for that vendor-specific property brought me to a cross-browser solution. But a good solution? I decided to ask:

Is there / can there be a way to prevent responsive images from upscaling beyond their original size? #2045

This is about the Docs (but maybe Bulma). That is, i may just need help, or this might be a feature request.

Overview of the problem


Upscaling images so that they’re larger than their original pixel size rarely looks good for the image itself and frequently can worsen the look of the layout (an image taking up 1116 pixels of vertical space before the content starts was my specific problem, when it is and should have displayed as only a 200 pixel image like this).

However, Bulma’s default handling of responsive images seems to be to upscale them.

Steps to Reproduce

Expected behavior

Responsive images don’t increase in size past their original size unless we add a class specifically requesting that.

Actual behavior

The image is enlarged to several times its actual size.


I’m replacing .image img { width: 100% } with:

  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */

but it seems there ought to be another way of simply telling images not to upscale, a better, more Bulma way.

OK so simply removing the .image class as well as is-128x128 on the documentation page gives me the behavior i expect. If that is the best approach, my whole issue can be fixed in a single line of documentation. But is that the right approach?