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 3 months ago

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

See if that makes a difference.

Bill Sholar 3 months ago

No change, but thanks

Purdey Chambraud about 2 months ago

Hi ! 

 

Have you by chance reach to make it work on chrome?

 

I have the same issue, don't know how to do 

 

have a great day,

 

Purdey