为什么当我使用背景图像时图像尺寸会减小？

Question

I am trying to display a image using background-image and img src tag. I am confused when I am using same image using background-image it become smaller .but when I used as img src tag it look good why?

here is my code https://codesandbox.io/s/affectionate-cartwright-pw2mq?file=/src/styles.css

<div class="curve-img-container">

jjjj
    </div>

        <img src="src/bg-curvy-desktop.svg" alt="">

my output is this

why there is a difference??in both case it look same?

Answer 1

The background image appears with respect to the height and width of the element you are setting it to. When you use image tag initialy it loads with actual height and width of the image ( which is different comparing to your div ) so they appear different.

So in your case if you want both of them to look a like you need same height and width for img and div.

So for example you can do these if you want both of them to look the same.

Note that object-fit: cover;object-position: center; is equivalent of background-size: cover;background-position: center; of css, Hope this answers your doubt

And as a side note always use img tag as it better for SEO.

 img{ height: 50px; width: 50px; object-fit: cover; object-position: center; }.mydiv{ height: 50px; width: 50px; background-size: cover; background-position: center; }

 <div class="mydiv" style="background-image: url(https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg)"></div> <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" alt="">

Answer 2

The background-image CSS property sets background images on an element so the size of that element decides the dimension of the image

In your case, you have set the styles for div element:

• width: 100% - which will take 100% of the viewport
• height: 200px - which will set both the element and the image height to 200px

While <img> element embeds an image into the document which means the browser will render the image as it is (without changing its dimension).

In your case the dimension of the image is:

• width: 1440px; height:449px;

Answer 3

You should use the css value background-repeat: no-repeat for prevent the background image from duplicating itself in the div.

For controlling the background image size inside the div, read about the css property background-size : https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 4

in your code sample you have set the height for the container of the image background to 200px, so the image will take this height also as it is relative to what ever its container size...

Please note also that you should consider the background size as it is going to be auto by default, this will prevent the background from stretching and will keep the height/width percentage to prevent image being distorted.