How can I make the two images the size of their containing divs? [closed]-CodePudding

enter image description here

So I have this page made using grids in html-css. How can I make the images inside the "Adopt" and "Offer" divs be full size (thus making the divs themselves be the size of the photos)?

CodePudding user response：

I didn't understand your question, check this in case you can get good result width:100%; height:100% and if you want add object-fit:cover

CodePudding user response：

Check below snippet.

section {
  width: 100%;
  background-image: url('https://assets.dragoart.com/images/11939_501/how-to-draw-iron-man-easy_5e4c9ed9b16b58.14188289_53732_3_3.png');
  background-size: cover;
  background-position: center;
  min-height: 200px;
  margin-top: 20px;
  color: #fff;
}

<div>
  <section>Adopt</section>
  <section>Offer</section>
</div>