Моя первоначальная проблема, как и многих других, состоит в том, чтобы сохранить DIV A с фиксированным соотношением сторон (чистый CSS / без JS). Он предназначен для повторного использования в любом родительском DIV B независимо от размера B. DIV A должен соответствовать наименьшему размеру B.
В этой анимации вы видите КРАСНЫЙ div, который всегда является квадратом и соответствует внешнему div наименьшего размера.
Никакие vh или vw или vmin или vmax не используются, и я не хочу использовать ни один из них, потому что иногда vh не является более надежным для реального представления высоты области просмотра (см. CSS3 100vh, не постоянный в мобильном браузере )
Для этого я использовал изображение (серый прямоугольник) с фиксированным соотношением сторон (здесь 1/1), которое расширяется, чтобы соответствовать его родителю.
Он работает следующим образом:
1) #контейнер (тонкая пунктирная розовая рамка) - самый внешний DIV. Это может быть полный видовой экран или любой DIV с заданным размером. Размеры = H x contW
2) #widthwrapper (синяя рамка) высота H (высота: 100%). Оборачивает изображение.
3) #imgwrapper - изображение (большой серый прямоугольник). Его высота также H (высота: 100%). Поскольку это квадрат, его ширина = H.
4) #widthwrapper оборачивает img, и его базовая ширина: fit-content = img width = H. Поскольку его max-width = 100%, у вас есть #widthwrapper width = min (H, contW). Таким образом, #widthwrapper имеет вид w x h = min (H, contW) x H. #widthwrapper si также позиция: относительная.
5) #content is position: absolute рядом с #widthwrapper и занимает то же пространство, что и #widthwrapper. Таким образом, #content - это, например, w x h = min (H, contW) x H.
6) #contentwrapper (пунктирный красный) вертикально центрирован в #content. При взломе padding-bottom это квадрат с шириной = 100%. Таким образом, размеры #contentwrapper: w x h = min (H, contW) x min (H, contW).
<html>
<head>
<style>
#container {top: 5px;left: 5px;right: 5px;bottom: 5px;position: fixed;border: 1px dashed pink;}
*, *:before, *:after {box-sizing: content-box;}
#widthwrapper {height: 100%;min-height:100%;max-height:100%;max-width: 100%;margin: auto;width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;position: relative;outline: 1px solid blue;border: 1px dashed blue;}
#imgwrapper {height: 100%;min-height: 100%;max-height: 100%;}
#content {position: absolute;top: 0; bottom: 0; right: 0; left: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#contentwrapper {height: 0;width: 100%;padding-bottom: 100%;outline: 3px dashed red;}
</style>
</head>
<body>
<div id="container">
<div id="widthwrapper">
<img id="imgwrapper" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='0' y='0' width='10' height='10' fill='none' stroke='black' stroke-opacity='0.3' /%3E%3C/svg%3E" />
<div id="content">
<div id="contentwrapper">
</div>
</div>
</div>
</div>
</body>
</html>
НО, если с одной стороны он работает с Chrome / Safari, он глючит с Firefox. Действительно, Firefox, кажется, не может включить изображение в #widthwrapper после изменения размера. Он изменяет размер изображения, но #widthwrapper остается таким, как если бы изображение было wxh = 0 x 0. В более общем случае Firefox, по-видимому, не распространяет на родительский DIV img ширину без внутреннего размера, который изменяется с учетом соотношения сторон и высоты ...
Любые идеи о том, чтобы это работало с Firefox, приветствуются ... (Я исправил ошибку в Bugzilla ... если вы не поддержали ее :-) ... https://bugzilla.mozilla.org/show_bug.cgi?id=1491936)