Question

我希望网页上的图片增长/缩小到Flexbox的可用高度或宽度并保持原始高宽比。

我在图片上使用了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会很好，因为它的布局很简单。但如果不能用它做，我会使用绝对定位。

Answer 1

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

其余部分，只需要进行弹性框内容，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 的狡猾方式仍将图像保留在内容中：

将图像设置为背景图，并使用contains for background-size，
将图像本身的宽度减小到零，只能看到它在背景中绘制。（这是为了保持内容的一部分并保持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

Answer 2

你没有定义＆＃34; dad元素＆＃34;

的宽度

<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>

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

2 个答案: