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

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