почему размер изображения уменьшается, когда я использую background-image?

Question

Я пытаюсь отобразить изображение, используя теги background-image и img src. Я смущен, когда я использую одно и то же изображение, используя background-image , оно становится меньше . Но когда я использую тег img sr c, это выглядит хорошо, почему?

вот мой код 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="">

мой вывод такой:

почему есть разница ?? в обоих случаях это выглядит одинаково?

Answer 1

Свойство background-image CSS устанавливает фоновые изображения для элемента, поэтому размер этого элемента определяет размер изображения

В вашем случае вы установили стили для div элемента:

• width: 100% - который займет 100% области просмотра
• height: 200px - который установит и элемент, и высоту изображения на 200 пикселей

Элемент <img> встраивает изображение в документ, что означает, что браузер будет отображать изображение таким, как оно есть (без изменения его размера).

В вашем случае размерность изображение:

• width: 1440px; height:449px;

Answer 2

в вашем примере кода вы установили высоту для контейнера фона изображения, равную 200 пикселей, поэтому изображение примет эту высоту так же, как и ее размер относительно контейнера ...

Пожалуйста, также обратите внимание, что вы должны учитывать размер фона, так как он будет автоматически выбран по умолчанию, это предотвратит растяжение фона и сохранит процент высоты / ширины, чтобы предотвратить искажение изображения.

Answer 3

Фоновое изображение появляется относительно height и width элемента, для которого вы устанавливаете его. Когда вы используете начальный тег изображения, он загружается с фактическими height и width изображениями (что отличается от вашего div) , поэтому они выглядят иначе.

Так что в вашем случае если вы хотите, чтобы они оба выглядели так, как вам нужно, то же самое height и width для img и div.

Так, например, вы можете сделать это, если хотите, чтобы они оба выглядели одинаково.

Обратите внимание, что object-fit: cover;object-position: center; эквивалентно background-size: cover;background-position: center; из css, надеюсь, это ответит на ваши сомнения

И в качестве примечания всегда используйте тег img, так как это лучше для 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 4

Вы должны использовать значение css background-repeat: no-repeat для предотвращения дублирования фонового изображения в div.

Для управления размером фонового изображения внутри div, прочитайте о свойстве css background-size: https://www.w3schools.com/cssref/css3_pr_background-size.asp