1

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
abcid d
  • 2,821
  • 7
  • 31
  • 46

4 Answers4

2

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Hi Temani Afif, thank you very much for sharing a solution to solve this problem! That works as expected! and thanks for a link to explain object-fit and object-position. – abcid d Jan 09 '20 at 20:55
0

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;
 }
Shrish Ankit
  • 19
  • 1
  • 4
  • Adding position: fixed will take the element out of document flow and it will be relative to the viewport. I don't think OP wants that. – Ramesh Reddy Jan 09 '20 at 17:28
  • Thanks, Shrish Ankit for your solution, but need to set properties in `img`, not in `.imageBG` – abcid d Jan 09 '20 at 17:28
0

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

.image-container {
  height: 353px;
}

img {
 height: 100%;
 width: 100%
}
Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
  • Thanks Ramesh! I did so, but image is disturbed. – abcid d Jan 09 '20 at 17:32
  • since we're using width 100% and height 353px the aspect ratio of the actual image is not maintained. your background image also uses some size and positioning properties so these two images will not look similar. How you want the images to be displayed is up to you but two images having different CSS can never look the same. – Ramesh Reddy Jan 09 '20 at 17:36
0

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

Victor Hugo
  • 108
  • 6