Реагируйте на мозаичные изображения с lazyload - PullRequest
0 голосов
/ 27 марта 2020

Я строю страницу плиточных элементов в строках, используя React. Элементы имеют произвольные размеры и пропорции. Я хотел бы, чтобы элементы в любой строке были одинаковой высоты, и я использую Flex для этого. По горизонтали это нормально и работает, но я не могу подобрать правильную высоту, чтобы соотношение сторон элементов сохранялось; высота соответствует содержанию элемента.

class DaisyTest extends React.Component {

    constructor(props) {
        super( props )
    }

    render() {

        var tiles = [ [400, 300], [300,400], [390, 300], [310, 400] ]
        var code = []

        tiles.map( tile => {
            var x = tile[0]
            var y = tile[1]

            var style={
                flex: x/y, 
                margin: 3, 
                backgroundColor: '#fee' 
            }

            code.push( 
                <div className='tile' style={style}>
                    {x}, {y} aspect={x/y}
                </div>
            )
        })
        return <div style={{display: 'flex'}}>
            {code}
        </div>
    }
}

Это то, что я получаю. enter image description here

...