How do I make 3 images which span across the width of the site responsive?

Question

So I would like to have 3 images along the full width of the website, each of them acting as 1/3. I would like them to be responsive and scale accordingly on different screen sizes and have them maintain aspect ratio, any ideas how I would go about that?

So far I have managed this, however they shrink very unnaturally when the site is scaled down.

Here's the code for it so far:

#content {
  height: auto;
  width: 100%;
  font-size: 0px;
  display: flex;
}

.images {
  width: 33.33%;
  height: 800px;
}

<div id="content">
  <img src="images/phantom.png" class="images" alt="Image of an actor from the musical Phantom of the Opera">
  <img src="images/lion_king.png" class="images" alt="Image of an actor from the musical Lion King">
  <img src="images/wicked.png" class="images" alt="Image of an actor from the musical Wicked">
</div>

score 0 · Answer 1 · answered May 07 '17 at 20:34

Put them in a container element and set the images to width: 100% or max-width: 100%.

#content {
    height: auto;
    width: 100%;
    font-size: 0px;
    display: flex;
}

.images {
    width: 100%;
}

<div id="content">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Phantom of the Opera">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Lion King">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Wicked">
  </div>
</div>

dippas · Accepted Answer · 2017-05-07T21:10:05.883

0

you were almost there,wrap the images in a div then set those divs flex-basis one third, you can do that by using calc() and set (max-)width:100% to imgs

EDIT - OP's comments

This works, however the heights of the image are messed up and all different heights, not flush with the footer. How would I fix the heights too

Because you have images with different ratio sizes, you have to add display:flex to div

body {
  margin: 0
}

#content {
  height: auto;
  width: 100%;
  display: flex;
}

#content>div {
  flex: 0 calc(100%/3);
  display: flex;
  /*demo*/
  box-sizing: border-box;
  border: 2px solid red
}

img {
  width: 100%;
  display: block
}

<div id="content">
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Phantom of the Opera"> </div>
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Lion King">
  </div>
  <div>
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Wicked"></div>
</div>

edited May 07 '17 at 21:10

answered May 07 '17 at 20:36

dippas

58,591
15
114
126

This works, however the heights of the image are messed up and all different heights, not flush with the footer. How would I fix the heights too? – PinkieBarto May 07 '17 at 20:45
wanna show me an example of what you have and what you want with your current images – dippas May 07 '17 at 20:48
Sure, basically I have the original sizes of the images to not reduce quality, and so the heights are slightly different. I uploaded the site onto github pages to show you what's happening: https://pinkiebarto.github.io/LondonWestEnd/ I'm looking for it to be flushed to the footer like so: http://i.imgur.com/QGuKOAM.png – PinkieBarto May 07 '17 at 20:52
for that remove `flex: 0 calc(100%/3)` – dippas May 07 '17 at 20:56
That does fix the issue, but now the first image is wider than the other two so the images are no longer 1/3s – PinkieBarto May 07 '17 at 21:00
@PinkieBarto sorry for late reply, see updated answer. basically, where you have `flex: 0 calc(100%/3)` add `display:flex`, with these two you can achieve what you want – dippas May 07 '17 at 21:10
That works, but now through doing this the aspect ratio of images are all messed up and stretched.. I was thinking of integrating `object-fit: cover;` into this somehow to preserve the aspect ratio. Any ideas? – PinkieBarto May 07 '17 at 21:15
up to you, it [won't work in IE/EDGE](http://caniuse.com/#feat=object-fit) – dippas May 07 '17 at 21:17
That shouldn't really be an issue, since this site is for my school assignment and isn't actually going to go live. – PinkieBarto May 07 '17 at 21:19

How do I make 3 images which span across the width of the site responsive?

2 Answers2