Question

问题是，整个图像在调整大小时必须拉伸以适应窗口。

大多数图像工作正常，但最后一个图像的宽度不同，只是调整大小。

它必须是绝对位置，因为下面有一个Web画布。

我想我尝试了所有的东西，所有的flex-grow，flex-basis东西。我不明白。

正如您在示例中所看到的，最后一张图像应该与其他图像高度一致，但我无法使其适合。

＆＃13;

.container img {
  width: 100%;
}

.container {
  width: 40%;
  background: #777;
}

.container2 {
  width: 12.5%;
  background: #777;
}

.myflex {
  display: flex;
  position: absolute;
}

＆＃13;

<div class="myflex">
  <div class="container">
    <img src="https://placehold.it/512x512/000088/ffffff" />
  </div>
  <div class="container">
    <img src="https://placehold.it/512x512/000088/ffffff" />
  </div>
  <div class="container">
    <img src="https://placehold.it/512x512/000088/ffffff" />
  </div>
  <div class="container2">
    <img style="" src="https://placehold.it/64x512/000088/ffffff" />
  </div>
</div>

＆＃13;

Answer 1

在一行中使用此flexbox

     <!DOCTYPE html>
<html>
<head>
<style> body{margin:0;}
.flex-container { 

  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;

  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row;
  flex-flow: row;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.flex-item:nth-of-type(1) { flex-grow: 1; }
.flex-item:nth-of-type(2) { flex-grow: 1; }
.flex-item:nth-of-type(3) { flex-grow: 2; }
.flex-item4:nth-of-type(4) { flex-grow: 1; }
.flex-item {
    background-color: cornflowerblue;
    width: 40%; 
}
.flex-item 4{
    background-color: cornflowerblue;
    width: 10%; 
    margin: 10px;
}
.flex-item img{
    width: 100%;    height: 100%;
}.flex-item4 img{
    width: 100%;    height: 100%;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>
  <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>
  <div class="flex-item"> <img src="https://placehold.it/512x512/000088/ffffff" /></div>  
  <div class="flex-item4">  <img style="" src="https://placehold.it/64x512/000088/ffffff" /></div>  
</div>

</body>
</html>

Answer 2

如果您想让所有时间图片保持相同的高度，只需将display: flex;添加到.container和.container2类。

这是一个演示：

http://jsfiddle.net/huvogt3g/1/

如何使Flexbox项目符合其图像大小？

2 个答案: