Доброго дня.
Не секрет, что при разработке универсальных интерфейсов, которые завязаны на размере картинки, нужно учитывать, что размеры могут быть любыми, при этом размер контейнера должен быть четко определен и иметь одну и ту же высоту, что у других контейнеров. Для этого можно использовать либо background (но тут явный минус - никакого сео), либо object-fit (но тут явный минус - никакой кроссбраузерности).
Поэтому остаются либо javascript (явный минус - контент не должен управляться скриптами), и собственно хак с картинкой в img, задвинутой за div, у которого эта же картинка установлена фоном. Технически картинка видна, просто спрятана через z-index.
Будет ли индексироваться? Могут ли быть санкции? Есть ли у вас опыт подобного?
либо object-fit (но тут явный минус - никакой кроссбраузерности).
Ну это не совсем так. Никакой тут только IE, впрочем, ничего нового. Использовал object-fit-images для решения этого недоразумения - впечатления положительные, работает.
Средний
