Если картинка горизонтальная, то 100%, если нет то оставлять первоначальную ширину?

Как реализовать на CSS такое ?

Что при получении горизонтальной картинки она занимала всю ширину, при вертикальной только необходимую ?
  • Вопрос задан
  • 119 просмотров
Решения вопроса 1
в css вы не определите ориентацию картинки, вам нужно на js посчитать отношение ширины к высоте и проставить класс
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
На цсс можно копать только в сторону object-fit

.image-block img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
Ответ написан
Комментировать
alex-1917
@alex-1917
Если ответ помог, отметь решением
Определять пропорцию через JS - тупиковый путь.
На аналогичную задачу убил вагон времени, в итоге пришел к получению с сервера реальных ширины и высоты картинки, чуть запрос пришлось переписать.
В JS сравниваю эти два числа, профит.
Просто вовремя осенило - на сервере ведь уже хранятся размеры загруженных картинок, WHY NOT?
Как у вас - хз, возможно так не прокатит.
5d6e9eb400198281666448.png
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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