containing the image inside a css grid

Question

I am new to css grids

I have an background image whose size is greater than size of grid size how can I make the image fit in grid with same size as grid

when I try to the background image into grid it exceeds the size of grid html

 .warper{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:100px 600px 400px 80px;
     }
            .header{grid-column-start:1;
            grid-column-end:3}
            .jumbo{grid-column-start:1;
            grid-column-end:3}
            .cards{grid-column-start:1;
            grid-column-end:3}
            .footer{grid-column-start:1;
            grid-column-end:3}
            .header{
            display:grid;
            grid-template-columns:100px 1fr 1fr;
            }
            .logo{height:80px;
            width:80px}
            ul {
              list-style-type: none;
            }
            a{text-decoration:none}
            li{ display: inline-block;
            margin:10px
            }
            .links {display: flex;
                justify-content: center;}
            .jumbo{
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 500px
            }
            .cover{object-fit: cover;
              width: 100%;}

<body>
          <div class="warper">
         <div class="header">
         <div class="navbar">
          <img class="logo" src="download.png"></div>
          <div class="logogrid">
          <h2>TechJuice</h2></div>
         <div class="links">
           <ul>
             <li><a href="default.asp">Home</a></li>
             <li><a href="news.asp">News</a></li>
             <li><a href="contact.asp">Contact</a></li>
             <li><a href="about.asp">About</a></li>
           </ul> 
         </div>
         </div>
         <div class="jumbo"><img class="cover" src="photo-1478358161113-b0e11994a36b.jpg"></div>
         <div class="cards">cards</div>
         <div class="footer">footer</div>
        </div>
    </body>

'background-size' property can solve your problem. – Joykal Infotech Aug 26 '19 at 07:38 — Joykal Infotech, Aug 26 '19 at 07:38

Varsha Dhadge · Answer 1 · 2019-08-26T08:13:56.777

If you are using object-fit you have to define height & width of image.

Or you can use background property. Below is solution using background-size.

.warper{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:100px 600px 400px 80px;
 }
        .header{grid-column-start:1;
        grid-column-end:3}
        .jumbo{grid-column-start:1;
        grid-column-end:3}
        .cards{grid-column-start:1;
        grid-column-end:3}
        .footer{grid-column-start:1;
        grid-column-end:3}
        .header{
        display:grid;
        grid-template-columns:100px 1fr 1fr;
        }
        .logo{height:80px;
        width:80px}
        ul {
          list-style-type: none;
        }
        a{text-decoration:none}
        li{ display: inline-block;
        margin:10px
        }
        .links {display: flex;
            justify-content: center;}
        .jumbo{
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 500px;background:url(https://dummyimage.com/600x400/000/fff) no-repeat;background-size:100%;background-position:center center;
        }
        .cover{object-fit: cover;
          width: 100%;}

<body>
      <div class="warper">
        <div class="header">
        <div class="navbar">
            <img class="logo" src="https://dummyimage.com/600x400/000/fff"></div>
            <div class="logogrid">
            <h2>TechJuice</h2></div>
        <div class="links">
                <ul>
                  <li><a href="default.asp">Home</a></li>
                  <li><a href="news.asp">News</a></li>
                  <li><a href="contact.asp">Contact</a></li>
                  <li><a href="about.asp">About</a></li>
                </ul> 
        </div>
        </div>
        <div class="jumbo"><!--<img class="cover" src="https://dummyimage.com/600x400/000/fff">--></div>
        <div class="cards">cards</div>
        <div class="footer">footer</div>
    </div>
</body>

score 0 · Answer 2 · answered Aug 26 '19 at 07:35

0

You can reduce the size of the image in the Image tag and try

<img class="cover" src="photo-1478358161113-b0e11994a36b.jpg" width="10px" height="10px">

you can change the size accordingly

answered Aug 26 '19 at 07:35

Ankit Das

640
4
16

containing the image inside a css grid

2 Answers2

Linked