Menu icon Foundation
Block Grid bug in Firefox? Images incorrectly display at original size

I'm setting up a block grid to display audio and video clips. The image thumbnails are various sizes, but I want them to all display a uniform size as per the block grid. It looks correct in Chrome, but in Firefox, the images are displaying at their original sizes, having not been scaled to fit within the block grid.

Here is a screenshot of the CodePen rendered in Chrome:

Screenshot 2014 12 03 16.28.49

Here are two screenshots of the same CodePen rendered in Firefox:

Screenshot 2014 12 03 16.34.12

Screenshot 2014 12 03 16.34.22

I was under the impression that Block Grid will scale the images to fit. Any help is appreciated.

And here is the CodePen to try it out yourself: http://codepen.io/fourhexagons/pen/gbaZvj?editors=110

Thanks in advance!

block gridfirefoxbug

I'm setting up a block grid to display audio and video clips. The image thumbnails are various sizes, but I want them to all display a uniform size as per the block grid. It looks correct in Chrome, but in Firefox, the images are displaying at their original sizes, having not been scaled to fit within the block grid.

Here is a screenshot of the CodePen rendered in Chrome:

Screenshot 2014 12 03 16.28.49

Here are two screenshots of the same CodePen rendered in Firefox:

Screenshot 2014 12 03 16.34.12

Screenshot 2014 12 03 16.34.22

I was under the impression that Block Grid will scale the images to fit. Any help is appreciated.

And here is the CodePen to try it out yourself: http://codepen.io/fourhexagons/pen/gbaZvj?editors=110

Thanks in advance!

fourhexagons almost 5 years ago

To fix this I added max-width: 100%; to the button element nested in .music-grid & .video-grid.

.music-grid, 
.video-grid {
  padding-bottom: rem-calc(40);

  button {
    background: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

}

Rafi Benkual almost 5 years ago

Bock grid does not scale the images. The images should be set to width 100% by default.