Вопрос:
Я пытаюсь иметь два вложенных flexboxes с центрированным изображением в самом внутреннем, который всегда будет вписываться в его контейнер, сохраняя его соотношение, не будучи растянутым. Изображение оснащено:
img{ max-height: 100%; max-width: 100%; }
Посмотрите здесь: https://jsfiddle.net/quz4zgb0/2/.
Здесь ширина масштабируется правильно, но высота растягивается, как только контейнер становится слишком маленьким. Как я могу это предотвратить?
Заранее спасибо! Жак
Лучший ответ:
применение object-fit: contain; и flex-shrink: 0; к <img> должно быть достаточно близко к тому, что вы хотите.
Ответ №1
По умолчанию дети с гибкими ячейками имеют значение flex-shrink равное 1, что означает, что при необходимости ребенок будет уменьшаться по мере необходимости.
Добавив flex-shrink: 0 в ваш .image-container, вы увидите, что он теперь масштабируется правильно и равномерно.
Ответ №2
У браузеров все еще есть проблемы с изображением и гибким родителем.
У Firefox нет ошибок, которые я видел, хром и IE 11 еще хуже.
Хотя все они еще не согласованы, вы можете использовать абсолютное позиционирование:
.image-container{ height: 100%; background-color: green; display: flex; justify-content: center; align-items: center; position:relative; } .image-container img{ position:absolute; top:0; bottom:0; right:0; left:0; margin:auto; max-height:100%; max-width: 100%; } .main-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; } .header, .footer { width: 100%; height: 1em; background-color: red; } .image-container { height: 100%; background-color: green; display: flex; justify-content: center; align-items: center; position: relative; } .image-container img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-height: 100%; max-width: 100%; }<div class=»main-container»> <div class=»header»>header</div> <div class=»image-container»> <img src=»http://weknownyourdreamz.com/images/circle/circle-08.jpg» /> </div> <div class=»footer»>footer</div> </div>
