CODEWITHSUNDEEP
htmlcsscss-grid
kamulos
kamulos

Reputation: 319

CSS fit grid cell to proportionally resized img

I have a grid-layout, where I want the header to be divided in two cells: logo and navigation. The logo cell should have the same width as the img element in it, but the img element has the same height as the row and is proportionally resized.

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.logo > img {
  width: auto;
  height: 100%;
}

.nav {
  grid-area: nav;
  background-color: cornflowerblue;
}
<div class="grid">
  <div class="logo">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="nav">
    test
  </div>
</div>

As long as logo is exactly 100px high everything works as expected. But if it is a different size, the width of the logo cell is as big as the original image width and not the resized image.

What can I do to get an exact fit to the resized img width?

Upvotes: 1

Views: 1256

Answers (2)

Ankit Jaiswal
Ankit Jaiswal

Reputation: 274

Hope I understood your question

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.nav {
  display: flex;
  background-color: cornflowerblue;
  align-items: center;
}

.nav ul li {
  margin: 0px;
  padding: 0px 20px;
  display: inline-block;
  list-style: none;
}
<html>

<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>

<body>
  <div class="grid">
    <div class="logo">
      <img src="https://dummyimage.com/100x100/000/fff" />
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

Upvotes: 0

vals
vals

Reputation: 64164

You are setting a loop in the dimension calculus. The image is set to a 100% height, so it depends on the grid dimensions. And once this is set, the grid needs to adapt to the image width .... Tis kind of loops are not handled well by the CSS styling in general.

Break the loop by setting the image height to 100px directly:

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: 100px;
  grid-template-areas: "logo nav";
}

.logo {
  grid-area: logo;
  background-color: goldenrod;
}

.logo > img {
  width: auto;
  height: 100px;
}

.nav {
  grid-area: nav;
  background-color: cornflowerblue;
}
<div class="grid">
  <div class="logo">
    <img src="http://placehold.it/200x200" alt="">
  </div>
  <div class="nav">
    test
  </div>
</div>

Upvotes: 3

Related Questions