Image container unable to resize to fit within a CSS grid cell

Question

Image container unable to resize to fit within a CSS grid cell

I'm currently working on organizing a CSS grid for my images on a tribute page project from free code camp. I was able to set up the grid as intended, but I am facing some difficulties in making the images fit perfectly within each cell. Some images are not filling the entire cell, while others are exceeding it. Below is the code snippet that I have been working with:

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;
  margin-left: 100px;
  margin-right: 100px;
  grid-column-gap: 5px;
  align-content: stretch;
  justify-content: stretch;
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21)
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  place-self: stretch;
  ;
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  place-self: end stretch;
  width: 95%;
}

.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}

img {
  width: 100%;
  height: 87%;
}

.normal {
  width: 100%;
  height: auto;
}

<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

Please excuse any messiness in the code as I attempt to resolve this issue.

html css grid-layout css-grid

Answer 1

Answer №1

The main modification I made was incorporating the object-fit property to your images:

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp

In addition, I have provided suggestions on certain rules in your code that may not be essential for this particular project:

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  /*grid-template-rows: 5px 5px;*/
  margin-left: 100px;
  margin-right: 100px;
  grid-gap: 5px;
  /*align-content: stretch;
  justify-content: stretch;*/
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21);
  overflow:hidden;
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  /*place-self: stretch;*/
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  /*place-self: end stretch;
  width: 95%;*/
}

/*.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}*/

img {
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/*.normal {
  width: 100%;
  height: auto;
}*/

<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

Answer 2

The main modification I made was incorporating the object-fit property to your images:

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

https://www.w3schools.com/css/css3_object-fit.asp

In addition, I have provided suggestions on certain rules in your code that may not be essential for this particular project:

.img-div-container {
  display: grid;
  grid-template-columns: 50% 25% 25%;
  /*grid-template-rows: 5px 5px;*/
  margin-left: 100px;
  margin-right: 100px;
  grid-gap: 5px;
  /*align-content: stretch;
  justify-content: stretch;*/
  background: hsla(199, 19%, 62%, 0.21);
  border: 2px outset hsla(199, 19%, 62%, 0.21);
  overflow:hidden;
}

.image-bigger {
  grid-column: 1/2;
  grid-row: 1/3;
  /*place-self: stretch;*/
}

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
  /*place-self: end stretch;
  width: 95%;*/
}

/*.image-normal,
.image-bigger,
{
  place-self: stretch;
  justify-self: flex-start;
}*/

img {
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
}

/*.normal {
  width: 100%;
  height: auto;
}*/

<div class="img-div-container">
  <div class="image-bigger"><img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg"></div>

  <div class="image-normal"><img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg"></div>
  <div class="image-normal"><img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg"></div>
  <div class="image-wider"><img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg"></div>

</div>

Answer 3

Answer №2

Consider organizing your grid with grid-template-areas

Assign a grid-area to each div accordingly,

Take this as an example:

HTML

<div class="grid-container">
  <div class="verticalphoto"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
"verticalphoto photo1 . ." "verticalphoto photo2 . ." ". . . .";
}

.verticalphoto { grid-area: verticalphoto; }

.photo1 { grid-area: photo1; }

.photo2 { grid-area: photo2; }

To adjust the image size, use

img {

 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;

}

Answer 4

Consider organizing your grid with grid-template-areas

Assign a grid-area to each div accordingly,

Take this as an example:

HTML

<div class="grid-container">
  <div class="verticalphoto"></div>
  <div class="photo1"></div>
  <div class="photo2"></div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
"verticalphoto photo1 . ." "verticalphoto photo2 . ." ". . . .";
}

.verticalphoto { grid-area: verticalphoto; }

.photo1 { grid-area: photo1; }

.photo2 { grid-area: photo2; }

To adjust the image size, use

img {

 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;

}

Answer 5

Answer №3

Your current code includes:

  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;

This sets up a grid with 3 columns and 2 rows, which seems coherent.

I would suggest using:

  display:grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;

To avoid fixed values and allow the browser to manage sizing for the rows.

You also have:

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
}

This setup would work better with specific grid-template-areas that describe 4 columns and 3 rows, which is not the case here (you set 3 columns and 2 rows).

Instead, you could use the following:

.image-wider {
  grid-column: 2 / span 2; 
  grid-row: 2;
}

Specifying how many cells to span through instead of cell numbers without having grid-template-areas set.

When working with flex or grid, it's helpful to break it down into simple steps if you're unfamiliar.

You could start by adding extra classes to make your layout easier to read and adjust later.

The use of row-gap might be similar to adding a margin-bottom for the first two small grids.

Here's an example broken down into sections to show where each container should be placed ;)

.grid {
  display:grid;
  margin:0 100px;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;
}

.c1 {
  grid-column:1;
}
.c2 {
  grid-column:2;a
}
.c3 {
  grid-column:3;
}

.c23 {
  grid-column:2/ span 3;
}
.r1 {
  grid-row:1;
}
.r2 {
  grid-row:2;
}
.r12 {
  grid-row:1/ span2;
}
.image-normal {
  margin-bottom:5px;
}
img {
  height:100%;
  width:100%;
}

<div class="img-div-container grid">
  <div class="image-bigger c1 r12">
    <img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg">
    
  </div>
  <div class="image-normal c2 r1">
    <img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg">
    
  </div>
  <div class="image-normal c3 r1">
    <img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg">
    
  </div>
  <div class="image-wider c23 r2">
    <img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg">
    
  </div>
</div>

It appears there was confusion between grid-template-areas and grid-template-rows/-columns in setting up your grid system.

Answer 6

Your current code includes:

  display: grid;
  grid-template-columns: 50% 25% 25%;
  grid template-rows: 5px 5px;

This sets up a grid with 3 columns and 2 rows, which seems coherent.

I would suggest using:

  display:grid;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;

To avoid fixed values and allow the browser to manage sizing for the rows.

You also have:

.image-wider {
  grid-column: 2/4;
  grid-row: 2/3;
}

This setup would work better with specific grid-template-areas that describe 4 columns and 3 rows, which is not the case here (you set 3 columns and 2 rows).

Instead, you could use the following:

.image-wider {
  grid-column: 2 / span 2; 
  grid-row: 2;
}

Specifying how many cells to span through instead of cell numbers without having grid-template-areas set.

When working with flex or grid, it's helpful to break it down into simple steps if you're unfamiliar.

You could start by adding extra classes to make your layout easier to read and adjust later.

The use of row-gap might be similar to adding a margin-bottom for the first two small grids.

Here's an example broken down into sections to show where each container should be placed ;)

.grid {
  display:grid;
  margin:0 100px;
  grid-template-columns: 50% 25% 25%;
  grid-template-rows:1fr 1fr;
}

.c1 {
  grid-column:1;
}
.c2 {
  grid-column:2;a
}
.c3 {
  grid-column:3;
}

.c23 {
  grid-column:2/ span 3;
}
.r1 {
  grid-row:1;
}
.r2 {
  grid-row:2;
}
.r12 {
  grid-row:1/ span2;
}
.image-normal {
  margin-bottom:5px;
}
img {
  height:100%;
  width:100%;
}

<div class="img-div-container grid">
  <div class="image-bigger c1 r12">
    <img src="http://s2.glbimg.com/eP3_5jDhj_6tF-nyyiGpPOKdHNh8tT68kXTqIHZg3lBrXaqmUDsPSdlfxwreNWMq/e.glbimg.com/og/ed/f/original/2012/10/29/754_carlos_marighella.jpg">
    
  </div>
  <div class="image-normal c2 r1">
    <img class="resize" src="https://drupal-multisite-s3.s3-us-west-2.amazonaws.com/files/marighella2.jpg">
    
  </div>
  <div class="image-normal c3 r1">
    <img class="normal" src="http://www.cartografiasdaditadura.org.br/files/2014/12/Carlos_Marighella.jpg">
    
  </div>
  <div class="image-wider c23 r2">
    <img class="normal" id="bigode" src="http://memoriasdaditadura.org.br/wp-content/uploads/2014/11/mariguella4-e1471390559677-600x286.jpg">
    
  </div>
</div>

It appears there was confusion between grid-template-areas and grid-template-rows/-columns in setting up your grid system.

Image container unable to resize to fit within a CSS grid cell

Answer №1

Answer №2

Answer №3

Similar questions

Unusual spacing between lines on Chrome

Easily validate the contenteditable attribute of <td> element

How can I incorporate dynamic moving lines into my website's loading sequence?

How can I access the ng-template in a component?

The "hover" effect is not activating on a carousel

How can you turn off CSS3 animations for browsers that don't support them

Issue with HTML: The heading is not aligned on the same line as the logo

Preventing scrolling in jQuery UI Draggable when using flexbox

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

Traverse through an array of pictures and add the data to a Bootstrap placeholder within HTML markup

Applying CDNJS CSS or external CSS to Nodemailer HTML templates with Jade and Express: A Guide

Leverage the Google Drive API for the storage of app-specific data

Issue with Bootstrap navigation bar not displaying on iPad devices

Creating a HTML element that functions as a text input using a div

What is the best way to rerun a script without having to manually refresh the entire webpage?

The sub menu in IE 8 does not stay open while hovering over it

Looking to dynamically adjust row color based on status using ANGULAR 4

On the initial page load, Magento is failing to load the CSS properly

Customizing Material UI: Grouping Tab components within a div container

What are the best techniques for resizing a Text Field with media queries?