What is the best way to ensure that three images stretching across the entire width of the website are responsive?

Question

What is the best way to ensure that three images stretching across the entire width of the website are responsive?

I am looking to showcase 3 images across the full width of my website, with each image taking up one-third of the space. I want these images to be responsive and adjust accordingly to different screen sizes while maintaining their aspect ratio. Do you have any suggestions on how I can achieve this?

Currently, I've been able to implement this design, but I'm facing issues with the images shrinking in an unnatural way when the site is scaled down.

https://i.sstatic.net/kXVAo.jpg

Here's the code snippet that I've used 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>

html css responsive-images

Answer 1

Answer №1

It seems like you are close to the solution! Try wrapping the images in a div and then setting the flex-basis of those divs to one third using calc(). Make sure to also set (max-)width:100% for the img elements.

UPDATE - Original Poster's feedback

You're on the right track, but the heights of the images are uneven and causing alignment issues with the footer. Any suggestions on how to fix this?

Since your images have different aspect ratios, try adding display:flex to the parent 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>

Answer 2

It seems like you are close to the solution! Try wrapping the images in a div and then setting the flex-basis of those divs to one third using calc(). Make sure to also set (max-)width:100% for the img elements.

UPDATE - Original Poster's feedback

You're on the right track, but the heights of the images are uneven and causing alignment issues with the footer. Any suggestions on how to fix this?

Since your images have different aspect ratios, try adding display:flex to the parent 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>

Answer 3

Answer №2

Place the images in a container element and adjust their size using either width: 100% or max-width: 100%.

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

.photos {
    width: 100%;
}

<div id="gallery">
  <div>
    <img src="http://example.com/image1.jpg" class="photos" alt="Description of Image 1">
  </div>
  <div>
    <img src="http://example.com/image2.jpg" class="photos" alt="Description of Image 2">
  </div>
  <div>
    <img src="http://example.com/image3.jpg" class="photos" alt="Description of Image 3">
  </div>
</div>

Answer 4

Place the images in a container element and adjust their size using either width: 100% or max-width: 100%.

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

.photos {
    width: 100%;
}

<div id="gallery">
  <div>
    <img src="http://example.com/image1.jpg" class="photos" alt="Description of Image 1">
  </div>
  <div>
    <img src="http://example.com/image2.jpg" class="photos" alt="Description of Image 2">
  </div>
  <div>
    <img src="http://example.com/image3.jpg" class="photos" alt="Description of Image 3">
  </div>
</div>

What is the best way to ensure that three images stretching across the entire width of the website are responsive?

Answer №1

Answer №2

Similar questions

Reset input fields upon jQuery removal

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

JQuery table sorter is unable to effectively sort tables with date range strings

Is it possible to create an animation with CSS3 transitions?

Leveraging the power of animate.css library to enhance page transitions on Nuxt

Changing Tailwind CSS variables for customization

The Analog Clock is unable to access the property of null

In what way does Angular incorporate _page-theme.scss assets?

Prioritize the Menu display

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

Is it possible to open a new tab window using a radio button?

transferring data from an HTML form on the View page to the controller

The minimum height increases as the inner divs expand

Bootstrap's landing page problem

Can a custom CSS be linked directly to the angular-cli.json file?

I am having trouble accessing the database. Jacky @ localhost Password: NO

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

Expansive image coverage

What is the best way to access the inner html of every cell within a table row that I have selected?

How to Position Buttons at the Bottom of a Card with Bootstrap