@ZIROKUL

Как сделать картинку на весь div?

Добрый день!

Подскажите у меня есть
<div class="tour-img">
     <img src="/upload/iblock/b9e/b9e2c06ad884e21b5a21e120e129f8e7.jpg" alt="Сердце Байкала - Ольхон">
</div>


У дива с классом tour-img = height: 390px; и ширина 100% как мне в этом блоке сохраняя пропорции можно разместить картинку 1200 на 480? Подскажите
  • Вопрос задан
  • 709 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Вариант первый - картинка в блоке:

<div class="element">
<img class="element__image" alt="" src="ссылка-на-картинку.jpg" />
</div>


.element {
width: 100%;
height: 500px; /* любая высота которая нужна */
}

.element__image {
width: 100%;
height: 100%;
object-fit: cover;
}


Вариант второй - бекграунд элемента:

<div class="element"></div>

.element {
width: 100%;
height: 500px; /* любая высота которая нужна */
background: url("ссылка-на-изображение.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
Зависит от ситуации ты можешь напрямую написать в диве через background-image и прописать свойство cover
либо
к картинке написать display: block, widh: 100%, height: 100%, object-fit: cover
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы