Я строю страницу плиточных элементов в строках, используя 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](https://i.stack.imgur.com/TnT4N.png)