CODEWITHSUNDEEP
htmlcsscss-grid
Kamran Shehzad
Kamran Shehzad

Reputation: 61

containing the image inside a css grid

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>

Upvotes: 2

Views: 380

Answers (2)

Varsha Dhadge
Varsha Dhadge

Reputation: 1751

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>

Upvotes: 3

Ankit Das
Ankit Das

Reputation: 650

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

Upvotes: 0

Related Questions