Menu icon Foundation
Chrome proportional image issue-combined row and column

Using 6.3 on either Flex or regular grid, with this code, the rendering works correctly on Firefox and Safari, but on Chrome does not reduced the height of the image as the width is reduced, making the image stretched vertically:

<div class="row column">
   <img src=/path/to/image.jpg">
</div

Changing to this syntax, it renders correctly on all 3 browsers:

<div class="row">
   <div class="column">
      <img src=/path/to/image.jpg">
   </div>
</div

chromecombined row and column

Using 6.3 on either Flex or regular grid, with this code, the rendering works correctly on Firefox and Safari, but on Chrome does not reduced the height of the image as the width is reduced, making the image stretched vertically:

<div class="row column">
   <img src=/path/to/image.jpg">
</div

Changing to this syntax, it renders correctly on all 3 browsers:

<div class="row">
   <div class="column">
      <img src=/path/to/image.jpg">
   </div>
</div
Albert Delorenzi about 1 month ago

The Documentation shows <div class="column row">

See if that makes a difference.

Bill Sholar about 1 month ago

No change, but thanks