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

Question

[Norum]

Использую vue carousel 3d и не могу понять, как избавиться от серого фона на адаптивной версии и сделать так, чтобы исчез этот серый фон



Весь код https://jsfiddle.net/f8tevsaj/
Сам сайт tempessj.beget.tech

Answer 1

[phrodo]

Убери растягивание картинки или перебей с помощью width: auto;

Comments

[Norum]

тогда картинка на маленьких экранах обрезается

Answer 2

[Spisoktem]

Задайте родительскому тегу картинки <figure></figure>height: 100%, а картинке такие свойства

width: 100%;
object-fit: cover;
object-position: top center;
height: 100%;

Comments

[Norum]

помогло, но немного другие параметры задал для img

width: 100%;
height: 100%;
background-size: cover !important;

Но картинка смотрится растянуто.

[Spisoktem]

Norum, сделайте по моему примеру и не будет этого

[Spisoktem]

свойство background-size: cover !important; к тегу img не применимо

[Norum]

Spisoktem, тогда картинка обрезается на маленьких экранах

[Spisoktem]

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

[Norum]

Spisoktem, а как сделать так, чтобы высота подстраивалась исходя от реальных размеров картинки? Я задавал height: 100% всем блокам, но в итоге у меня картинка не показывалась

[Spisoktem]

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