Question

在Flex容器中设置图像的最大高度和最大宽度时，我遇到了一个小故障。

以下是flex容器的css

.galleria-images{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  flex : 1; /* It's also a flex item hence take default height available in viewport */
}

现在我的应用程序是将一个子图像设置为以两个轴为中心的flex容器。但它不应超过父容器（flex容器）的高度或宽度。我也不希望图像缩小或增长以保持纵横比。因此我写了下面的CSS。

img{
    flex:0 0 auto;
    vertical-align: bottom;
    max-width: 100%;
    max-height: 100%;
}

但现在这对我有用了。即使柔性容器具有灵活的高度，其内部的图像也会溢出。

这在视口方向更改时有效。如下图所示。

还有什么可以做的吗

JSfiddle

＆＃13;

.galleria {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80px;
  right: 80px;
  background-color: rgba(100, 100, 100, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.galleria .galleria-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: rgba(200, 200, 200, 0.7);
}
.galleria .galleria-images img {
  flex: 0 0 auto;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 100%;
}
.galleria .galleria-thumbs {
  flex: 0 0 50px;
  background-color: rgba(200, 200, 200, 0.3);
}

＆＃13;

<div class="galleria">
  <div class="galleria-images">
    <img src="https://pixabay.com/static/uploads/photo/2016/06/13/07/32/cactus-1453793_960_720.jpg">
  </div>
  <div class="galleria-thumbs">
  </div>
</div>

＆＃13;

Answer 1

图像元素忽略其直接父级，因为它具有静态位置。尝试使父元素相对定位并使图像绝对定位：

.galleria-images {
    position: relative;
}

.galleria-images img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

更新了小提琴：https://jsfiddle.net/o4w7t61u/

Answer 2

您可以尝试使用 object-fit ，并确保查看浏览器支持tables。

object-fit CSS属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中。

.galleria .galleria-images img {
  ...
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /*or "cover" depends on what you need*/
}

并尝试根据需要调整justify-content值。

<强> jsFiddle

＆＃13;

.galleria {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 80px;
  right: 80px;
  background-color: rgba(100, 100, 100, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.galleria .galleria-images {
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
  align-items: center;
  flex: 1;
  background-color: rgba(200, 200, 200, 0.7);
  overflow: auto;
}
.galleria .galleria-images img {
  flex: 0 0 100%;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.galleria .galleria-thumbs {
  flex: 0 0 50px;
  background-color: rgba(200, 200, 200, 0.3);
  text-align: center;
}

＆＃13;

<div class="galleria">
  <div class="galleria-images">
    <img src="//unsplash.it/800/600?image=0">
    <img src="//unsplash.it/800/600?image=1">
    <img src="//unsplash.it/800/600?image=2">
  </div>
  <div class="galleria-thumbs">
    thumbnails
  </div>
</div>

＆＃13;

IE 11和Edge目前都不支持object-fit，我还建议使用背景图片而不是内联图片，例如

<div style="background:url("path/to/image.jpg") center / contain;">

图像最大高度100％在flexbox内部

2 个答案: