Я работаю над простой CSS-сеткой, изменяющей размер изображения, которая масштабируется при изменении размера области просмотра.В моем примере изображение находится в самой левой ячейке сетки, а текст - в соседней ячейке справа.Интересно, что на поведение изменения размера, похоже, влияют по-разному, в зависимости от того, используете ли вы chrome или firefox.В Chrome, когда текст перемещает нижнюю границу ячейки за высоту изображения, высота изображения изменяется в соответствии с тем, чтобы увеличить размер изображения и вызвать его неправильное масштабирование.В то время как в Firefox высота изображения, кажется, не изменяется и продолжает корректно уменьшаться.Какие у вас есть мысли о том, как решить эту проблему, или это ошибка в реализации Firefox или Chrome спецификации CSS сетки?Хотелось бы кое-что подумать о том, как заставить оба браузера работать одинаково.
Вот пример, который я собрал вместе на codepen, который показывает, о чем я говорю.Просто подтолкните правый край браузера к точке, в которой текст превышает высоту изображения, и описанное мной поведение становится очевидным.
https://codepen.io/bradnjones/full/WyyOyY
Вот HTML-код:
<html dir="ltr" lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS GRID Firefox / Chrome behave differently</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
</div>
</body>
</html>
Вот CSS:
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.image {
grid-column: 1/2;
grid-row: 1/2;
object-fit: contain;
align-self: start;
width: 100%;
max-height: 100%;
}
.text {
grid-column: 2/3;
grid-row: 1/2;
}