强制img适合作为flex元素的div

Question

我有一个div，其高度由封闭div上的flex显示定义。 目的是在此div中显示图像。

我的HTML5代码是：

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  1 0 auto; 
  border: 1px solid red ;
}
img {
  height:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

#container div是正确的大小，适应窗口高度，但img超过div高度...我希望img高度适合div！我希望我能找到一个纯CSS3解决方案，避免使用JavaScript。

感谢您的帮助，

让 - 大卫

Answer 1

只需为图片width:100%; 而不是 height: 100%;。这样，即使在调整视口大小时，它也能完美地适应容器宽度，同时保持其宽高比。只需给出height: 100%;，就会强制横向方向的图像水平重叠容器。

如果容器中没有文字，您也可以将.container font-size: 0;提供给下面的avoid the white margin。

＆＃13;

＆＃13;

#box {
  display: flex;
  flex-direction: column;
}
#container {
  flex: 0 1 auto;
  border: 1px solid red;
  font-size: 0;
}
img {
  width: 100%;
}
header,
footer {
  flex: 0 0 20px;
  background-color: #aaa;
}

＆＃13;

<div id="box">
  <header>
    this is the header text
  </header>
  <div id="container">
    <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg" />
  </div>
  <footer>
    this is the footer text
  </footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

刚添加宽度：100％;在img风格。尝试一次

＆＃13;

＆＃13;

#box {
  display: flex;
  flex-direction: column;
  height: 100%;
  
}
#container {
  flex:  0 1 auto; 
  border: 1px solid red ;
 
 
}
img {
  height:100%;
  width:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

＆＃13;

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需要将max-width：100％添加到图像元素。

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  0 1 auto; 
  border: 1px solid red ;
}
img {
  max-width: 100%;
  height:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

Answer 4

将IMG的高度和宽度设置为100％

＆＃13;

＆＃13;

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  0 1 auto; 
  border: 1px solid red ;
}
img {
  height:100%;
  width:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

＆＃13;

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

我找到了自己的解决方案......使用带jquery的js，没有我梦寐以求的最好的东西，但我会分享它......欢迎任何评论。

  var imageWidth;
  var imageHeight;
  newImg = new Image();

  $(document).ready(function() {
    newImg.src = "http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg";
    newImg.onload = function() {
      imageWidth = newImg.width;
      imageHeight = newImg.height;
      containerWidth = $('#container').width();
      containerHeight = $('#container').height();
      $('img').attr('src', newImg.src);
      if ((imageWidth / imageHeight) > (containerWidth / containerHeight)) {
        $('img').css('width', containerWidth + "px");
      } else {
        $('img').css('height', containerHeight + "px");
      }
    };
  });

  $(window).resize(function() {
    $('img').hide();
    containerWidth = $('#container').width();
    containerHeight = $('#container').height();
    $('img').show();

    if ((imageWidth / imageHeight) > (containerWidth / containerHeight)) {
      $('img').css('width', containerWidth + "px");
      $('img').css('height', (containerWidth * imageHeight / imageWidth) + "px");
    } else {
      $('img').css('height', containerHeight + "px");
      $('img').css('width', (containerHeight * imageWidth / imageHeight) + "px");
    };
  });

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#container {
  background: blanchedalmond;
  flex: 1 0 auto;
  border: 1px solid red;
}

img {}

header,
footer {
  flex: 0 0 20px;
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
  <header>
    this is the header text
  </header>
  <div id="container">
    <img />
  </div>
  <footer>
    this is the footer text
  </footer>
</div>

Answer 6

不确定你真正想要的是什么。像这样的东西？：

＆＃13;

＆＃13;

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  1 0 auto; 
  border: 1px solid red ;
}
img {
  display: block;
  max-width:100%;
  max-height:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

＆＃13;

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

＆＃13;

＆＃13;

＆＃13;