Maintain the aspect ratio of an image using CSS and flexbox styling

Question

Maintain the aspect ratio of an image using CSS and flexbox styling

I have a gallery of images that looks great on a full-size PC screen. However, when I resize it for viewing on a phone, the aspect ratio is not maintained and the images only stretch in width.

Currently, this is how it appears: https://gyazo.com/a1f605bb410865579025644b0a267adf

Additionally, you may notice that at certain points, the gallery transitions from showing one image to two images briefly before settling back to one image permanently. How can I resolve this issue?

This is the CSS code being used:

    #images{
        display: flex;
        flex-wrap: wrap;
    }

    .image{
        display: flex;
        flex: 1;
        margin: 5px;
        min-width: 250px;
        min-height: 187.5px;
        object-fit: contain;

    }

    .image > img{
        flex: 1;
    }

And here is the HTML code:

<div id="images">

            <div class="image">
                <img src="f1.jpg">
            </div>
            <div class="image">
                <img src="f2.jpg">
            </div>
            <div class="image">
                <img src="f3.jpg">
            </div>
            <div class="image">
                <img src="f1.jpg">
            </div>

            //the above structure continues
            //it's currently temporary and will be replaced with a loop.

</div>

html css flexbox

Answer 1

Answer №1

If you don't have specific requirements in mind, I recommend using Masonry:

This JavaScript grid layout library optimally positions elements based on available vertical space, similar to a mason fitting stones into a wall. You've probably encountered it frequently across the Internet.

It works well when paired with imagesLoaded for a lightweight and versatile solution.

There are various ways to implement Masonry, but here's one that I personally prefer:

All of my comments can be found within the code snippet below:

body {
  background: #131418;
}

/* Step 1: Resetting some default styles */

* {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

/* Step 2: Centering content inside the grid and creating adequate spacing around it by setting a device-based max-width and margin */

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}

/* Step 3: Setting the gap between grid items. Remember that the total gap between two items will be double what is set due to individual padding. Also, include box-sizing:border-box to ensure padding doesn't affect the total width of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
}

/* Step 4: Adding responsive media queries to make the entire grid adjust with different screen sizes */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}

<!-- Made possible by the excellent work of David DeSandro @ https://masonry.desandro.com -->

<!-- Part 1: Including the necessary scripts -->

<!-- Step 1: Begin by loading jQuery. While not mandatory for Masonry, jQuery simplifies tasks -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Step 2: Next, load imagesLoaded. This ensures images are only displayed once fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<!-- Step 3: Load Masonry itself -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


<!-- Part 2: Creating the grid -->


<!-- Step 1: Start with the main grid wrapper-->
<div class="grid">

  <!-- Step 2: Add individual grid items--->

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
  </div>

  <!-- Step 3: Repeat for additional items...--->
  <div class="grid-item">
    <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
  </div>

  <div class="grid-item">
    <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
  </div>

</div>

<!-- Part 3: The script execution -->

<!-- Now that everything is loaded, create a script to trigger Masonry on $grid upon image completion. Note that this essentially says: "if all images are loaded, trigger Masonry on $grid." -->
<script>
  $(".grid").imagesLoaded(function() {
    $(".grid").masonry({
      itemSelector: ".grid-item"
    });
  });
</script>

Answer 2

If you don't have specific requirements in mind, I recommend using Masonry:

This JavaScript grid layout library optimally positions elements based on available vertical space, similar to a mason fitting stones into a wall. You've probably encountered it frequently across the Internet.

It works well when paired with imagesLoaded for a lightweight and versatile solution.

There are various ways to implement Masonry, but here's one that I personally prefer:

All of my comments can be found within the code snippet below:

body {
  background: #131418;
}

/* Step 1: Resetting some default styles */

* {
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

/* Step 2: Centering content inside the grid and creating adequate spacing around it by setting a device-based max-width and margin */

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}

/* Step 3: Setting the gap between grid items. Remember that the total gap between two items will be double what is set due to individual padding. Also, include box-sizing:border-box to ensure padding doesn't affect the total width of the item */

.grid-item {
  padding: 5px;
  box-sizing: border-box;
}

/* Step 4: Adding responsive media queries to make the entire grid adjust with different screen sizes */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}

<!-- Made possible by the excellent work of David DeSandro @ https://masonry.desandro.com -->

<!-- Part 1: Including the necessary scripts -->

<!-- Step 1: Begin by loading jQuery. While not mandatory for Masonry, jQuery simplifies tasks -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Step 2: Next, load imagesLoaded. This ensures images are only displayed once fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<!-- Step 3: Load Masonry itself -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


<!-- Part 2: Creating the grid -->


<!-- Step 1: Start with the main grid wrapper-->
<div class="grid">

  <!-- Step 2: Add individual grid items--->

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg">
  </div>

  <!-- Step 3: Repeat for additional items...--->
  <div class="grid-item">
    <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg">
  </div>

  <div class="grid-item">
    <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" />
  </div>

  <div class="grid-item">
    <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" />
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" />
  </div>

</div>

<!-- Part 3: The script execution -->

<!-- Now that everything is loaded, create a script to trigger Masonry on $grid upon image completion. Note that this essentially says: "if all images are loaded, trigger Masonry on $grid." -->
<script>
  $(".grid").imagesLoaded(function() {
    $(".grid").masonry({
      itemSelector: ".grid-item"
    });
  });
</script>

Answer 3

Answer №2

I've recently come across a useful CSS property called object-fit

It offers various options including:

contain
fill
cover
none
scale-down

This property is user-friendly and helps to maintain the image ratio

For more information, check out the documentation HERE

Answer 4

I've recently come across a useful CSS property called object-fit

It offers various options including:

contain
fill
cover
none
scale-down

This property is user-friendly and helps to maintain the image ratio

For more information, check out the documentation HERE

Answer 5

Answer №3

UPDATE - An example has been included.

#images {
  display: flex;
  flex-wrap: wrap;
}

.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: auto;
}

<div id="images">
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>

</div>

To maintain the image aspect ratio, you can set width:100% and height:auto. This will ensure the image adjusts to the container width while preserving the aspect ratio.

Answer 6

UPDATE - An example has been included.

#images {
  display: flex;
  flex-wrap: wrap;
}

.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: auto;
}

<div id="images">
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>
  <div class="image">
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9">
  </div>

</div>

To maintain the image aspect ratio, you can set width:100% and height:auto. This will ensure the image adjusts to the container width while preserving the aspect ratio.

Maintain the aspect ratio of an image using CSS and flexbox styling

Answer №1

Answer №2

Answer №3

Similar questions

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

Ways to position every additional post alongside one another?

Creating a CSS grid layout with a scrollbar positioned on the left side and content filling from left to right

Using Jquery to create a slideshow with a div that is set to absolute

Ways to retrieve a class list of a tag located within a div by clicking on the div, rather than the tag itself

Footer not sticking to the bottom of the page with Material UI

Top section of a table repaired

Instructions for creating a Google Maps overlay that hovers above the zoom bar

Is the initial carousel element failing to set height to 100% upon loading?

Shift designated list item to the right with overflow handling

Transferring the final space from a node containing a mixture of content to a separate

Applying the transform:scale property to the parent element causes the child element's dropdown menu to appear beneath a different row

Extracting Values from JSON Array using Form Input Text

Unable to apply 3rd condition with ngClass into effect

Problem with Chrome Compatibility for Bootstrap Carousel

Display a pair of divs by utilizing the select option tag element alongside a submit button

Prevent the display of HTML tags in ASP.NET

Arrange data into columns on a website

HTML Code for Tracking Facebook Friends' Likes on a Page

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?