CODEWITHSUNDEEP
htmlcsscss-grid
Martin
Martin

Reputation: 61

How to fit a image into css-grid without stretching

enter image description hereProblem: The IMG is stretching the css-grid, and I want the image to scale-down and fit into the grid.

Tried: I have tried setting a max-height/width on the image, but it only reduces the stretching of the image.

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
background-color: #161616;
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
<div class="grid-container">
     <div class="nav_bar">

     <img src="./MLW_IMAGES/M.L.W logo.png" class="nav_img">


     <div class="nav_links">
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

Upvotes: 2

Views: 4607

Answers (4)

Daniel Msanii
Daniel Msanii

Reputation: 11

Add style "align-items: start"; to the grid container.

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Take one class for only image. Give particular height and width to image class and give below css to image.

.class-name img {
  max-height: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

Upvotes: 1

S. Rieger
S. Rieger

Reputation: 41

In responsive context:

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

/* grid */

.grid-element img {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

Upvotes: 0

strek
strek

Reputation: 1230

You can try setting max-height and max-width and specify a width you want the image to take if the image size is larger. is this what you are expecting ?

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
img
{
max-height:100px;
max-width:100px;
}
<div class="grid-container">
     <div class="nav_bar">

     <img src="https://dummyimage.com/50x50/000/fff" class="nav_img">


     <div class="nav_links">
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

Upvotes: 0

Related Questions