How to make img behave the same as background-image? - html

Question

I use an image as a background image, background-image: url(), and I also use this image placed inside <img src="">
It looks like the height of src image is shorter the height of the background image.
If I set a height for src image equals height of the background image, the src image will be disturbed.
What CSS properties should I set to make src image have the same height as background image, but it won't disturb the src image? Please note: I need to adjust ONLY in src image, not background image.
Please take a look at my sample in jsfiddle
HTML
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
CSS
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
/* height: 353px; */
}
Please note: Because the image I use is long, I have to set width: 100% for img. If I don't set that, a navigation bar will show at the bottom of the browser.

Answer 1

Consider object-fit and object-position
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
height: 353px;
object-fit:cover;
object-position:center;
display:block; /*to make it behave as div and avoir whitespace issue*/
}
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
Related for more details: Object-fit On A Canvas Element

Answer 2

Add position:fixed in CSS class. Then you can adjust the height.
.imageBG {
background-image: url("https://library.danahall.org/wp-
content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
position:fixed;
}
img {
width: 100%;
height: 353px;
}

Answer 3

Just add a class to the img containing div and set its height to 353px.
.image-container {
height: 353px;
}
img {
height: 100%;
width: 100%
}

Answer 4

As i see you src image is right and what you background image is doing is scaling the image to make it fit 100% and also your 353px, so your src image height was'nt wrong, it was the backgorund
if you use math and right proportions you would get this:
height: 252px; // this is the right proportions
right math one