Как создать блок который будет сжиматься одновременно по гориз и верт?

Question

[Александр Иванов]

img{
height: auto;
width: 100px;
}

Как сделать тоже самое только для DIV ?

P.S. Зачем это надо ?

Сейчас многие "умные" заказчики начинают в гуглспеедтесте проверять сайты.
Но вот незадача сжатия без потерь которое бы удовлетворяло гуглу не существует.
Единственный выход не использовать img где это возможно, сохранив все способности img.

Answer 1

[Ankhena]

Не вполне понятно, что значит div вместо img.

Вариант 1: base64 в тег img
https://jsfiddle.net/q65c0Lnv/

Вариант 2:
Блок всегда сохраняющий пропорции https://jsfiddle.net/Ankhena/cLhxv7eq/
Но эти пропорции надо знать.

Comments

[Александр Иванов]

Я решил свою проблему через webp, но вариант 2 предложенный вами на мой взгляд овечает мой вопрос)
Спасибо!

Answer 2

[Андрей]

вопрос не очень понятен, но если Вы хотите достичь того же поведения у div'a, что и у Вашего img, то

div{
display: inline;
height: auto;
width: 100px;
}

но я не уверен, что Вам это надо.

Сжатия существуют.
Вероятно, Вы просто загружаете картинку шириной в 1920px на экран мобильного в том числе, что может не понравиться гуглу

Comments

[Александр Иванов]

Поверьте не существует его сжатия, как минимум сервиса который бы на 100% подходил

Картинка может растягиваться по всей ширине и не становиться хуже при auto в h и w