Menu icon Foundation
Best technique for images that extend beyond the grid

I have a layout that requires images to bleed off the sides of the screen on common sized screens, but to reveal more of the image on larger screens, so the image isn't scaling it just revealing extra. I can't do it as a background images because there will already be a background image behind this.

gridimages

I have a layout that requires images to bleed off the sides of the screen on common sized screens, but to reveal more of the image on larger screens, so the image isn't scaling it just revealing extra. I can't do it as a background images because there will already be a background image behind this.

Rafi Benkual over 2 years ago

Not sure what you mean? If you place an image inside of a .row, it will have a max-width. So you can place it outside of the grid for fluid width or in the grid and add the .expanded class to a row so it is fluid width.

Kevin Neal over 2 years ago

Yeah sorry I'm not explaining very clearly

In the rough mock up below it shows a large screen where the two images (orange squares) are fully visible.

As you make the browser smaller then the images are cropped off the edges of the screen instead of scaling down and you just see part of the images with the rest outside of the view

Hope that makes some sense !

 

Ryan Patterson over 2 years ago

Kevin,

 

Can you share your code? There could be many things causing the issue. Are your images inside .row/.column classes. Foundation's css should contain a style rule for images, setting max-width: 100%; and height: auto;. So images should be resizing if inside row/column, and if there is not a css rule to specifically set the width and height. 

 

Thanks, 

 

Ryan

Corey Schaaf over 2 years ago

So you have an image on the left and an image on the right that exist in their own cells and the content in the middle is separate? 

If that's the case - you CAN accomplish what you're asking for using background images. 

You just have to specify the position. 

 

i would do this like so: 

.left-image{
     background:url(http://placehold.it/500x200) no-repeat right top;
}

.right-image{
     background:url(http://placehold.it/500x200) no-repeat left top;
}
<div class="large-3 columns left-image"><!-- you may have to put a non-breaking space in here --></div>
<div class="large-6 columns"></div>
<div class="large-3 columns right-image"><!-- you may have to put a non-breaking space in here --></div>

 

John Jameson over 2 years ago

easy way (ideally in an appropriate breakpoint; image will overflow the container and the overflow will disappear):

.the-container-column {overflow:hidden;}
.the-container-column img {width:1000px; max-width:1000px; margin-right:0; margin-left:auto;}
//edited; i think this will work -- set the image size manually and try to pin it to the right or left side. if it can leave the flow of the page this is easier to do with absolute positioning....

hard way (image will center horizontally and vertically within its container:

.my-great-container-for-just-the-image {
    position:relative;
    // stuff to specify height and width here, perhaps in vw units or something
    overflow: hidden;
  }
.my-great-container-for-just-the-image img {
      position: absolute;
      top: 0;
      bottom: 0;
      left:0;
      right:0;
      margin: auto;
      width:100%; // or maybe 150% or something
    }