Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Adrian Elizalde
Adrian Elizalde
4,939 Points

Two images side by side with same height

Hi, I have in my project two images that are side by side, they have different width and height. I would like that both images together have the 100% width of the container and the same height. That means that the images width will have to resize automatically. Thanks in advance.

html: <main> <div class="container-fluid"> <div class="container-images"> <div class="col4 group"> <img class="img_float1" src="http://payload319.cargocollective.com/1/10/320079/8699398/prt_1100x760_1474905371.jpg" alt="prueba"/> <img class="img_float2" src="https://images.adsttc.com/media/images/545f/f248/e58e/ce1e/4700/00f7/large_jpg/9.jpg?1415574065" alt="prueba"/> </div> </div> </div> </main>

CSS: img { display: block; max-width: 100%; height: auto; width: 100%; }

.container-fluid { width: 92%; margin: auto; }

.container-images { width: 100%; padding-left: 8px; padding-right: 8px; }

.img_float1 { float: left; width: 49.5%; margin: auto; padding-top: 0.5%; }

.img_float2 { float: right; width: 49.5%; margin: auto; padding-top: 0.5%; }

Brandon Benefield
Brandon Benefield
7,739 Points

Your images width are going to grow, as the users viewport becomes larger or smaller. For the height of your images, I would manually crop them to the same height in an editor like photoshop or even paint TBH. Set their heights to auto and they will both grow or shrink with the width. You also have a lot of unnecessary CSS, for example, the entire img selector, container-fluid and container-images can probably go.

A.J. Kandy
A.J. Kandy
Courses Plus Student 12,422 Points

I'm presuming that the images you are using are two different sizes / proportions. If so, what you're trying to do isn't possible without at least one of the images being stretched or squished visually. At most, you can get them to be the same height OR the same width, but not both simultaneously.

The simple way to do this, with images that may be of varying proportions, is to set the images as the backgrounds on container divs, in essence, cropping the image by hiding the overflow.

The CSS3 background-size: cover would allow you to do this, and you can experiment with other CSS background functions to center things, fit the image to a certain dimension, etc.

Also, a good thread here on StackOverflow for reference.

1 Answer

Adrian Elizalde
Adrian Elizalde
4,939 Points
Adrian Elizalde
Adrian Elizalde
4,939 Points

Hi, I wanted the images without cropping them. I am sure is not the best solution, but what I did is to give a percentage manually: img_float1: has a width of 338px. img_float2: has a width of 600px. Total: 938px Divided: 338/938=36% 600/938=64%

In the CSS: .img_float1 { width: 36%; }

.img_float2 { width: 64%; }