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

Question

[Владимир Голубь]

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

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

Answer 1

[Владимир]

в css вы не определите ориентацию картинки, вам нужно на js посчитать отношение ширины к высоте и проставить класс

Comments

[Владимир Голубь]

Сделал, так:

constructor(props) {
        super(props);

        this.state = {
            isGorizontal: false
        }
    }

    componentDidMount() {
        if (this.props.image) {

            let img = new Image();
            img.onload = () => {
                this.setState({
                    isGorizontal: img.width > img.height
                })
            };
            img.src = this.props.image;
        }
    }

Answer 2

[Антон Усачев]

На цсс можно копать только в сторону object-fit

.image-block img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Answer 3

[alex-1917]

Определять пропорцию через JS - тупиковый путь.
На аналогичную задачу убил вагон времени, в итоге пришел к получению с сервера реальных ширины и высоты картинки, чуть запрос пришлось переписать.
В JS сравниваю эти два числа, профит.
Просто вовремя осенило - на сервере ведь уже хранятся размеры загруженных картинок, WHY NOT?
Как у вас - хз, возможно так не прокатит.