IMG, который вписывается в div

Question

Я хочу фоновое изображение, которое автоматически соответствует размеру div.

У меня есть несколько div одного и того же класса, каждый с разными размерами, возможно ли установить ширину и высоту изображения точно в соответствии с размером div?

Как вы думаете, лучше использовать img или background-image?

PS Я не знаю, возможно ли установить размер фонового изображения, конечно, возможно для тега img, но если я использую тег img, изображение будет отделено от содержимого (оно не перекрывать как фон)

Answer 1

Лично, если вы собираетесь что-то изменить, я думаю, лучше использовать img.

Вы можете буквально просто установить высоту и ширину div, если вы этого хотите.

<div class="box"><img src="Path/to/image.png"/></div>

и тогда CSS будет выглядеть примерно так:

.box {
     height: 300px;
     width: 300px;
}

.box img {
     height: 300px;
     width: 300px;
}

Это один из способов сделать это в любом случае. Вы также можете установить его так, чтобы высота составляла 100% от размера div, но ширина была установлена ​​на auto, чтобы он масштабировался вместе с ним. Таким образом, изображение не будет искажаться. Как это:

.box img {
     height: 300px;
     width: auto;
}

Answer 2

Вы можете попробовать что-то вроде этого

<div style="width:200px;height:200px">
    <img src="image.png" width="100%" height="100%"/>
</div>

С фоновым изображением вы не сможете изменить размер изображения до точных размеров тега div.