Creating an Image Gallery with HTML and CSS that does not automatically resize images to make them square

Question

Creating an Image Gallery with HTML and CSS that does not automatically resize images to make them square

How can I create a 2-column, 3-row image gallery where the height of the boxes automatically fills up the grid? I want the images to be square with equal width and height without specifying pixel sizes. Is there a stretch property or something similar that can achieve this? Here's the CSS and HTML code:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0;
  padding: 0px;
}

img {
  width: 100%;
  height: auto;
  padding: 0px;
}

<div class="grid-container">
  <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
  <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
  <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
  <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
  <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

html css

Answer 1

Answer №1

To ensure that the box height is fully filled, it is important to utilize the "align-items" property set to "stretch" on the grid container.

.grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);.
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
        padding: 0px;
        align-items: stretch;
    }

Check out the demo code here

Answer 2

To ensure that the box height is fully filled, it is important to utilize the "align-items" property set to "stretch" on the grid container.

.grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);.
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0;
        padding: 0px;
        align-items: stretch;
    }

Check out the demo code here

Answer 3

Answer №2

Here is a solution for automatically resizing images when the window is resized:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
    align-items: stretch; /* Default. Items are stretched to fit the container */
}

img {
   width: 100%;
   height:auto;
   padding: 0px;
}

<div class="grid-container">
   <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
   <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
   <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
   <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
   <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

This is the link to your source code: source code

Answer 4

Here is a solution for automatically resizing images when the window is resized:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
    align-items: stretch; /* Default. Items are stretched to fit the container */
}

img {
   width: 100%;
   height:auto;
   padding: 0px;
}

<div class="grid-container">
   <img src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
   <img src="https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7">
   <img src="https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png">
   <img src="https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpg">
   <img src="https://atlantis.nyc3.digitaloceanspaces.com/styled/1bec9ec74aac91e70b3ef91fee1fc0f9">
   <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3DXqVk9AhGSx2PIYoUepA1UfZFnGt_kY6iJTq3hb10ZLGhFwPQg">
</div>

This is the link to your source code: source code

Answer 5

Answer №3

Here is some code you can try:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

img {
    width: 100%;
    height: 140px;
}

<div class="grid-container">
   <img src="https://www.exampleimage1.com/image.jpg">
   <img src="https://www.exampleimage2.com/image.jpg">
   <img src="https://www.exampleimage3.com/image.jpg">
   <img src="https://www.exampleimage4.com/image.jpg">
   <img src="https://www.exampleimage5.com/image.jpg">
   <img src="https://www.exampleimage6.com/image.jpg">
</div>

Remember to use images of the same size if you plan on using height:auto.

Answer 6

Here is some code you can try:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

img {
    width: 100%;
    height: 140px;
}

<div class="grid-container">
   <img src="https://www.exampleimage1.com/image.jpg">
   <img src="https://www.exampleimage2.com/image.jpg">
   <img src="https://www.exampleimage3.com/image.jpg">
   <img src="https://www.exampleimage4.com/image.jpg">
   <img src="https://www.exampleimage5.com/image.jpg">
   <img src="https://www.exampleimage6.com/image.jpg">
</div>

Remember to use images of the same size if you plan on using height:auto.

Creating an Image Gallery with HTML and CSS that does not automatically resize images to make them square

Answer №1

Answer №2

Answer №3

Similar questions

Ways to interact with a button that toggles between states

Tips for preventing Chrome from masking the background image and color on an autofill input

I'm looking to eliminate the redundant code within this CSS file

The Owl carousel seems to be malfunctioning as there are no error messages displayed and the div containing it disappears unexpectedly

Utilizing the Jquery hover feature to reveal or conceal an element

What is the best way to tailor a SELECT statement option to reveal a specific div on a different webpage?

The outline color cannot be removed from vue-carousel

What are the steps to personalize Twitter Bootstrap with Less for changing the height of the Navbar?

Encountered an Angular 9 error at core.js:6228, where a TypeError occurs when trying to read the property 'name' of an undefined

"Effortlessly move files with Filedrop HTML 5 and Jquery drag-and-drop feature

What is the best way to send a variable to a custom component without having it executed or processed upfront?

Personalized element IDs and unique CSS styles

Embed a Telegram account onto an HTML page using the <iframe> element

What could be causing the video autoplay feature to not function properly when used in conjunction with a bootstrap carousel

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Include the HTTP header in a GET request for an HTML hyperlink

Issues with the functionality of the submit button in Jquery Mobile

configure dynamic content within the slider element

Creating a form in PHP with the power of JavaScript, AJAX, and jQuery

Modifying URL in Node.js