How to make an image fill the background of a div? (using img tag in the div itself)-CodePudding

This seems like a simple problem but I'm having a bit of trouble finding a solution. I have cards on my page and I simply want the image (in the img tag which is inside the div) to fill the background of the div. The way the page is set up I want the img tag inside the div to take up the whole background. I know I can use background img in the css file. but I want each image to be different and have them fit their divs. Trying to figure out how to style them to do this. This is what it looks like, hopefully my question is clear..

Here is the code for the card and image:

                <div >
                    <img src="https://images.unsplash.com/photo-1552465011" alt="">
                    <div >
                        <h5>Title of Post</h5>
                        <img src="" alt="text">
                        <p> Some text here.</p>
                    </div>
                </div>

img {
    max-width: 100%;
    max-height: 100%;
    background-size: cover;
    position: relative;
    margin: 0;
    padding: 0;
    object-fit: cover;
}

.container .card{
    background: lightgreen;
    color: black;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 285px;
    height: 145px;
    margin: 15px;
    padding: 0%;
    border: 2px solid black;
    background-size: cover;
    position: relative;
}

CodePudding user response：

You have two <img> tags in your markup. I assumed you want the first <img> tag to fill the containing <div>.

You can use object-fit: cover. There are other values available with object-fit but cover stretches the image so it covers the container, but without changing the aspect ratio of your image.

You can then limit the img to be 100% of the width and height of the container.

Note that since this may truncate part of your image if the image's aspect ratio is not the same as the container, you can also use object-position to adjust the alignment of the image with the container.

See these examples below.

h5 {
  margin: 8px 0;
}

p {
  font-size: 12px;
  margin: 8px 0;
}

.container {
  display: flex;
}

.card {
  width: 285px;
  height: 145px;
  margin: 15px;
  padding: 0%;
  border: 2px solid black;
  position: relative;
}

.card-image {
  object-fit: cover;
  object-position: bottom;
  height: 100%;
  width: 100%;
}

.card-description {
  position: absolute;
  width: 100%;
  bottom: 0;
  margin-bottom: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  color: black;
}

<div >
  <div >
    <img  src="http://cdn.wallpapername.com/1920x1080/20190806/5d498ca7ac412.jpg" alt="">
    <div >
      <h5>Title of Post</h5>
      <p> Some text here.</p>
    </div>
  </div>

  <div >
    <img  src="https://static.fanpage.it/wp-content/uploads/sites/22/2020/07/iStock-464788862.jpg" alt="">
    <div >
      <h5>Title of Post</h5>
      <p> Some text here.</p>
    </div>
  </div>

  <div >
    <img  src="https://media.istockphoto.com/photos/three-lovely-puffy-tit-sitting-on-a-branch-in-winter-sunny-park-picture-id865636134?k=6&m=865636134&s=612x612&w=0&h=dAqcmx8ETyzUOpk_g5-4uWLZeTDdt-6Qe9tENCAcj20=" alt="">
    <div >
      <h5>Title of Post</h5>
      <p> Some text here.</p>
    </div>
  </div>
</div>

CodePudding user response：

    thanks,img tag itself an inline element so first you have to block this and then the img takes the full width of her parent element.
img{
display:block,
width:100%,
background-size:cover,
background-position:center center
}
or
.card img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}


  [1]: https://www.w3schools.com/html/html_blocks.asp

CodePudding user response：

You're almost there