如何使Flexbox项目适合其图像尺寸？

问题是，图像作为一个整体不得不伸展以适应调整窗口的大小。如何使Flexbox项目适合其图像尺寸？

大部分图片都可以正常工作，但最后一张图片的宽度不同，它只是调整大小。

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

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

正如您在示例中看到的那样，最后一张图片应该与其他图片在高度方向上吻合，但我无法将其合理化。

.container img { 
 
    width: 100%; 
 
} 
 

 
.container { 
 
    width: 40%; 
 
    background: #777; 
 
} 
 

 
.container2 { 
 
    width: 12.5%; 
 
    background: #777; 
 
} 
 

 
.myflex { 
 
    display: flex; 
 
    position: absolute; 
 
}

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

来源

2017-05-03 Blub

使用此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>

来源

2017-05-03 11:19:50

非常感谢您！你能解释一下'.flex-item 4 {}'语法吗？它在vscode中无效，但它起作用。我试着说'flex-item4 {}'，但它不再工作了。它也只适用于基于Chrome的浏览器，不会在Firefox或Edge中显示相同的正确结果。 – Blub

如果你想给所有的时间图像的高度相同，只需添加display: flex;您.container和.container2类。

这里有一个演示：

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

来源

2017-05-03 11:24:53

如何使Flexbox项目适合其图像尺寸？

回答

相关问题