@Norum

Как растянуть картинку в блоке на всю высоту без потери качества?

Как растянуть картинку в блоке на всю высоту и чтобы при этом картинка не выглядела растянутой и не терялось качество.

У меня получается так
61185ea716d1e900553299.jpeg

В макете вот так
61185ebdbcd97349081620.jpeg

Возможно ли вообще из исходников с макета сделать так же, как представлено в самом макете? Просто я изначально картинки подогнал под размер 350х350 и как я понял делается наоборот- берется картинка большого размера и в ужимается до параметров неактивного слайда и предстает в полный рост, когда слайд становится активным, верно?

Сам макет https://www.figma.com/file/gS0qw4gjqhQ0KVjJuWXbzB/...

Сам сайт cb95142.tmweb.ru
Весь код https://jsfiddle.net/c1xdvajn/

<div class="gallery-slider owl-carousel">
            <div class="gal-slide">
                <img src="img/gal-1.jpg" alt="1">
            </div>
            <div class="gal-slide">
                <img src="img/gal-2.jpg" alt="2">
            </div>
            <div class="gal-slide">
                <img src="img/gal-3.jpg" alt="3">
            </div>
            <div class="gal-slide">
                <img src="img/gal-4.jpg" alt="4">
            </div>
            <div class="gal-slide">
                <img src="img/gal-5.jpg" alt="5">
            </div>
            <div class="gal-slide">
                <img src="img/gal-6.jpg" alt="6">
            </div>
        </div>
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 2
LenovoId
@LenovoId
svg, css,js
https://codepen.io/topicstarter/pen/ZEKZKZq - вот так но я не знаю owl
Ответ написан
Комментировать
Pavel-ww
@Pavel-ww
Это удалите

.gallery-slider .owl-item.center img {
	height: 700px;
}
.gallery-slider .gal-slide img {
  height: 100%;
  display: block;
}


Это добавьте
.gallery-slider .owl-item.active.center .gal-slide {
	height: 700px;
}

Ну и да, вы верно поняли - возвращайтесь к работе с изображениями. После этого возможно еще пара корректировок кода потребуется
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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