Как задать картинке которая в html адаптивность?

Question

[steef08]

Как задать картинке, которая находится в html background-size: contain? background-position: center center? и другие css стили, чтобы она сжималась в зависимости от размера дисплея

html разметка

<div class="mainbg">
    <picture>
        <source srcset="/mainbg-min-.webp" type="image/webp">
        <img src="/mainbg-min.jpg" alt="картинка фона">
    </picture>
</div>

css стили

.mainbg {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 100vh;
}

Comments

[Froggyweb]

object-fit: cover

[steef08]

Froggyweb, Спасибо большое!)