Menu icon Foundation
White space between two images

Hello guys,
i'm starting to re-write my site with foundation framework but i have somes problems with spacing in table columns...

I create a DIV for head of site with 2 images, inserted in 2 div with cose attached:

My problem is i have to maximize max-width otherwise my pics are cropped....
Now, expanding max-width image are not cropped but i have a NOT DESIDER SPACE between the 2 images as in image attached...

How can i solve this ??

<div class="row collapse">
    	 <div class="small-4 columns">
          <img src="img/Logo.jpg" align="left"/>
        </div>
        <div class="small-8 columns right">
          <img src="http://www.pcprimipassi.it/images/Banner/Banner%20ADV/ELIOS729x90.png" align="right"/>
         </div>	 
		  
	</div>
            

         

Spaziaturalogo

spacingpadding

Hello guys,
i'm starting to re-write my site with foundation framework but i have somes problems with spacing in table columns...

I create a DIV for head of site with 2 images, inserted in 2 div with cose attached:

My problem is i have to maximize max-width otherwise my pics are cropped....
Now, expanding max-width image are not cropped but i have a NOT DESIDER SPACE between the 2 images as in image attached...

How can i solve this ??

<div class="row collapse">
    	 <div class="small-4 columns">
          <img src="img/Logo.jpg" align="left"/>
        </div>
        <div class="small-8 columns right">
          <img src="http://www.pcprimipassi.it/images/Banner/Banner%20ADV/ELIOS729x90.png" align="right"/>
         </div>	 
		  
	</div>
            

         

Spaziaturalogo
Amanda Healey almost 4 years ago

If you define the height and width of your images it should stop them from being cropped.
You could also resize your images to fit the space instead of trying to position them with code.

Stefano Ravagni almost 4 years ago

i tryed to set width and height but problem appear again...

And....if i set fixed dimension i lost responsibe layout....or not ??

Rafi Benkual almost 4 years ago

I would make your actual image wider (not with CSS) to fill the width of the column. Like this: http://codepen.io/rafibomb/pen/avbvbr?editors=110

Otherwise, you can set the width to 100% but that may distort your image: http://codepen.io/rafibomb/pen/gaOabg?editors=110

Stefano Ravagni almost 4 years ago

Thanks Rafi....in all of your examples, the banner image were cropped (try look at image info) or the logo image is too....i wannot this...i would images show exactly....

I set upd a max width of ROW as 72.5 rem, in this way i have the space for suite right the 2 image with original dimensions...in this way are not cropped but remain the white space ...

With table based structure is not a problem to set correctly...why here is a big problem ? i don't understand...

Stefano Ravagni almost 4 years ago

UPDATE!!!

I solve the problem adding new code like this:

.small-3-5 {
width: 28%; }

.small-8-5 {
width: 72%; }

With this dimension all images are sitted in right mode.... is not perfect but it is very near perfection ...

Could be a valid solution in your mind ???