将 flexbox 中的图像缩放到可用的宽度或高度答案

【问题标题】：Scale image in flexbox to available width OR height将 flexbox 中的图像缩放到可用的宽度或高度
【发布时间】：2016-06-04 20:03:48
【问题描述】：

我希望网页上的图片放大/缩小到弹性盒的可用高度或宽度，并保持原始纵横比。

我在图片上使用了max-height:100%; max-width:100%，但这不起作用。

页面总是填满浏览器窗口而不会溢出。它有 3 行：

顶部固定高度的标题
一篇文章，图片和描述并排
底部固定高度的页脚

图像应该随着可用的高度或宽度放大/缩小，具体取决于图像和周围框的纵横比。

这意味着大多数情况下，图像左侧或下方存在空白空间。

这是一个示例页面：

<html><head>
<title>Title</title>
<style type="text/css">
*    {font-size:100%; font:inherit; padding:0; border:0; margin:0}
body {background:#FFC; color:#333; font-family:sans-serif}

body                {display:flex; flex-direction:column; height:100%}
h1                  {text-align:right; margin-right:20em; background:#CAA}

article             {flex:1; display:flex}
article figure      {flex:1}
article figure img  {display:block; max-width:100%; max-height:100%}

#description        {width:20em; background:#ACA}
footer              {background:#AAC}
</style>
</head><body>
  <h1>Title</h1>

  <article>
    <figure> <img src="https://placekitten.com/987/765" /> </figure>
    <div id="description">
      <p>The description.</p>
    </div>
  </article>

  <footer> Footer </footer>
</body></html>

我创建了一个JSFiddle，但它不像在单独的浏览器窗口中查看时那样将页脚固定在底部。

使用 flexbox 会很好，因为它易于布局。但是如果这不能用它来完成，我会使用绝对定位。

【问题讨论】：

制作一个 div 使用 flex-box 进行拉伸，将图像放入其中，提供 100% 的最大宽度和高度。我在手机上不能举个例子对不起。
我想我做到了，但是当窗口高度降低时图像不会缩小。
可能重复：stackoverflow.com/a/37575733/3597276
@Michael_B 仅关于高度。我希望图像缩放到可用的宽度或高度。
因为我没有找到使用 flexbox 的解决方案，所以我切换到了绝对定位。查看更新的 JSFiddle：jsfiddle.net/0nw61s4t/1

标签： css flexbox

【解决方案1】：

我相信你错过了让 height:100% 从视口继承，

剩下的，这只是 flexbox inbrication 的问题，flex 的值 overflow 和要重置的最大尺寸：( demo to play with )

html,/* viewport values for height/width % */
body {
  height: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
article {
  display: flex;/* also a flex child */
  flex: 1;
  overflow: hidden;/* we'll squeeze children inside */
}
#description {
  width: 20em;
}
figure {
  flex: 1;
  display: flex;/* again also a flex child */
  overflow: hidden;/* we'll squeeze children inside */
}
img {
  margin: auto;/* will shrink to fit inside and sit in middle */
  max-height: 100%;
  max-width: 100%;
}
h1 {
  margin: 0;
  background: #CAA
}
#description {
  background: #ACA
}
footer {
  background: #AAC
}

<h1>Title</h1>

<article>
  <figure>
    <img src="https://placekitten.com/987/765" />
  </figure>
  <div id="description">
    <p>The description.</p>
  </div>
</article>

<footer>Footer</footer>

注意：这里的图片不会比原来的尺寸增长更多，它只会缩小。 min-height + max-height 100% 是高度 100%，宽度同上。

在object-fit 随处可见之前，备用background-size 将是一种替代方案，但会从内容中丢失图像。

因此，仅通过 CSS 并仍将图像保留在内容中的棘手方法是：

将图像设置为背景，并使用包含作为背景大小，
将图像本身的宽度减小到零，以便仅在背景中看到它。（这是为了使其成为内容的一部分，并保持 alt 属性对屏幕阅读器和搜索引擎有效）

http://caniuse.com/#search=background-size（对于较旧的 IE，请检查 polyfills，但涉及到 flex，所以我猜你并没有那么在意）

html,/* viewport values for height/width % */
body {
  height: 100%;
  margin: 0;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-flow: column;
}
article {
  display: flex;/* also a flex child */
  flex: 1;
  overflow: hidden;/* we'll squeeze children inside */
}
#description {
  width: 20em;
}
figure {
  flex: 1;
  display: flex;/* again also a flex child */
  overflow: hidden;/* we'll squeeze children inside */
  background:url(https://placekitten.com/987/765) center no-repeat;
  background-size:contain;
}
img {/* hide it and show as a background */
  height:0;
}
h1 {
  margin: 0;
  background: #CAA
}
#description {
  background: #ACA;
  display:flex;
}
p {
  margin:auto 1em;
  }
br:last-of-type {margin-bottom:1em;line-height:2em;}
footer {
  background: #AAC
}

<h1>Title</h1>

<article>
  <figure>
    <img src="https://plcekitten.com/987/765" alt="kitty to pet" /><!-- broken link to show the alt attribute and  that image is still part of content -->
  </figure>
  <div id="description">
    <p>Hide image and place it into figure's background,<br/> So it scales without any distorsion.<br/>Link to image broken on purpose to show that alt is here to be the content </p>
  </div>
</article>

<footer>Footer</footer>

DEMO to play with

【讨论】：

这会在一个又小又高的窗口中扭曲图像，因为高度会保持为封闭框的 100%。
@Kwebble 你是对的，正如我作为注释添加的那样，实际上，只有通过 background-size 才能在视觉上满足全部要求，但是它将图像本身从页面内容中取出:( 我将添加一个棘手的方式作为 sn-p 来说明我的意思）
如果你想查看它codepen.io/gc-nomade/pen/xOGYvQ 或下载完整的 zip（html 和 css 文件），我也将第二个 sn-p 转为 codepen：codepen.io/gc-nomade/share/zip/xOGYvQ
谢谢，但如果需要这样的技巧，我认为我更喜欢其他东西而不是 flexbox。我的下一次尝试将使用绝对定位。
@Kwebble absolute, display:table, 否则会带来同样的问题，object-fit 仍然不会是可用的跨浏览器，如果你不想使用bg棘手的方式，那么你需要javascript 来正确处理这个问题。 :)

【解决方案2】：

你没有定义“爸爸元素”的宽度

<html><head>
<title>Title</title>
<style type="text/css">
*    {font-size:100%; font:inherit; padding:0; border:0; margin:0}
body {background:#FFC; color:#333; font-family:sans-serif}

body                {display:flex; flex-direction:column; height:100%}
h1                  {text-align:right; margin-right:20em; background:#CAA}

article             {flex:1; display:flex; width: 100%;}

article .image {width: 100%;}
article .image img{ width: 100%; }

#description        {width:20em;display:flex; background:#ACA}
footer              {background:#AAC}
</style>
</head><body>
  <h1>Title</h1>

  <article>
     <div class="image">
       <img src="https://placekitten.com/987/765" alt="" />
     </div>
     <div id="description">
       <p>The description.</p>
     </div>
  </article>

  <footer> Footer </footer>
</body></html>

【讨论】：

这不会将页面限制在窗口高度，并在宽窗口中产生滚动条。我希望图像始终完全可见。