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

Question

[timers]

Картинка выводится через absolute в увеличенном виде, чтобы не было кривых картинок или пробелов в блоке с рисунком.
Но вот проблема с адаптивностью, сломал уже всю голову, height: получается обязателен и в ширину блок не уменьшает, что тут можно сделать?
Вот код:
https://jsfiddle.net/infotimers/u10jw9fd/1/

Answer 1

[boga-net]

https://jsfiddle.net/u10jw9fd/10/
Подправил

.mini-short-img {
	width: 30vmax;
	height: 20vmax;
}

И как вариант :

.mini-short-img {
	width: 40vw;
	height: 20vw;
}

Это то, что вам нужно ?

а вообще, вы в коде много наворотили лишнего. Вот, посмотрите, что можно убрать в вашем варианте

https://jsfiddle.net/u10jw9fd/15/

по поводу пробелов в блоке рисунка. Не мудрите с абсолютом, используйте для картинки

.element img {
	vertical-align: bottom; // middle / top - посмотрите по обстоятельствам
	margin-top: -2px; // тоже по обстоятельствам.
}

Comments

[timers]

а нет все верное спасибо, слушай а вот по теме еще не поможешь? https://toster.ru/q/531474?e=6525343#clarification...

[boga-net]

timers, я обновил ответ только что. Добавил пару моментов

сейчас гляну

[boga-net]

timers, ответил. Вам такой результат нужен ?

[timers]

.element img {
  vertical-align: bottom; // middle / top - посмотрите по обстоятельствам
  margin-top: -2px; // тоже по обстоятельствам.
}

Суть в том что картинки все разные и чтобы не подгонять или не переделывать размер каждой картинки, проще увеличить и брать по центру.

[boga-net]

timers, я сейчас попробовал вот здесь - https://jsfiddle.net/u10jw9fd/15/
разные дикие размеры и по высоте и ширине всё подстраивается нормально