CODEWITHSUNDEEP
htmlcss
abcid d
abcid d

Reputation: 2947

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

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.

Upvotes: 2

Views: 3213

Answers (4)

Temani Afif
Temani Afif

Reputation: 272947

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

Upvotes: 5

Victor Hugo
Victor Hugo

Reputation: 108

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

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

Just add a class to the img containing div and set its height to 353px.

.image-container {
  height: 353px;
}

img {
 height: 100%;
 width: 100%
}

Upvotes: 0

Shrish Ankit
Shrish Ankit

Reputation: 19

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;
 }

Upvotes: 0

Related Questions