Question

我有一个使用CSS flexbox缩放到可用高度的DIV。在这个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>

Answer 1

如果您可以从flex更改为阻止：

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

正如@janfoeh指出的那样，使用object-fit：contains使其成为可能：

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/

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

除此之外，我找不到一种不涉及脚本的方法。

Answer 2

将高度指定为百分比值时，即相对于父元素高度的百分比。 <img>标记也是如此。

在这个未知高度的flexbox布局中，您可以使用position技巧使图像适合弹性项目的宽度和高度，并使用transform技巧进行居中。< / p>

<强> jsFiddle

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

您还可以使用background图像，这样可以更轻松，关键是使用值contain。请参阅下面的简化演示。

<强> jsFiddle

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
}
.box:nth-child(2) {
  background: pink url(//dummyimage.com/300) no-repeat center center / contain;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 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;以确保图像不会被左右切断（这可能是个错误吗？）。

Answer 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;
}

Answer 5

删除图片代码并将其设置为.box div的背景background-size:cover;
jsfiddle 1

或者，如果你想避免裁剪：

删除图片代码并将其设置为.box div的背景background-size:contain;
jsfiddle 2

Flexbox图像缩放到高度并保持纵横比

5 个答案: