Flexbox масштаб изображения на высоту и сохранить пропорции

У меня есть DIV, который масштабируется до доступной высоты, используя CSS flexbox. В этом DIV есть изображение, которое я хотел бы масштабировать вместе с DIV в обоих измерениях. Это означает, что он должен быть масштабирован, сохраняя его соотношение сторон, а размеры, которые меньше, чем соответствующий размер DIV, должны быть центрированы.

Я могу сделать изображение по ширине DIV, но не по высоте. Поэтому портретные изображения выходят из границ DIV.

Ниже приведена jsFiddle, чтобы продемонстрировать проблему.

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

<div class="container">
  <div class="box"></div>
  <div class="box" style="background: pink;">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

Ответы

Ответ 1

, если вы можете перейти от flex к блоку:

https://jsfiddle.net/svArtist/ug6eoxfs/

как указывал @janfoeh, используя object-fit: содержать делает возможным:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:relative;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.box {
    background: yellow;
    width: 100%;
    padding: 0 5%;
    box-sizing:border-box;
    max-width: 100%;
    height: 100%;
    max-height:100%;
    position:relative;
}

.box img {
    height:100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: auto;
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:block;
    object-fit: contain;
}

Если требуется компоновка Flex, в качестве последнего средства вы можете использовать фоновое изображение, что делает все очень просто: https://jsfiddle.net/svArtist/e1c2tLme/ p >

    background: url(http://placehold.it/300) no-repeat center center;
    background-size: contain;

Кроме этого, я не могу найти способ, который не включает сценарии.

Ответ 2

Когда вы указываете высоту как процентное значение, это процент по отношению к высоте родительского элемента. Это также верно с тегом <img>.

В макете с неизвестной высотой flexbox вы можете использовать трюки position, чтобы изображение соответствовало ширине и высоте элемента гибкости, и используйте transform трюки для центрирования.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box:nth-child(2) {
  background: pink;
}
.box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div class="box"></div>
  <div class="box">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

Ответ 3

Использует flexbox! (JSFiddle)

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.box {
    flex: 1 1 auto;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.box img {
    width: 100%;
    object-fit: contain;
}

Ключ должен использовать object-fit: contain; для поддержания соотношения сторон и align-items: stretch;, чтобы гарантировать, что изображение не отрезается слева и справа (может быть, это ошибка?).

Ответ 4

На основе ответа @darrylyeo.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Ответ 5

Удалите тег изображения и установите его как фон .box div с помощью background-size:cover;
jsfiddle 1

или, если вы хотите избежать обрезки:

Удалите тег изображения и установите его как фон .box div с помощью background-size:contain;
jsfiddle 2