挑战布局 - 如何实现？ [英] Challenging layout - how to achieve?
问题描述
：
这个例子的主要内容是，他们所有的图像都是按照确切的规格来创建的，以使网格的大小相互交替。
我希望能够：
•使用任何图像大小，并将其裁剪为包含隐藏溢出的框
•缩小浏览器的大小，使包含的框和图像比例的宽度/高度成比例。
•如果可能，不要依赖任何插件。
我到目前为止所尝试的是：
•花车
•带有负值的顶部保证金的最大/最小高度
•使用填充和绝对定位，如示例
如何以最简洁的方式实现这个想法？
现在你可以用图像填充每个项目，添加文本等。
html，body {margin：0; height：100％;}。container {display：flex; flex-direction：column; flex-wrap：wrap;身高：100％ min-height：500px;}。container .item {height：calc（16.6％ - 20px）;背景：#eee; margin：10px;显示：flex;容器.item：nth-child（12），容器.item：nth-child（10），容器.item：nth-child（7），容器.item：nth- （5），容器.item：nth-child（4），container.item：nth-child（2）{height：calc（33.3％ - 20px）;}。container .item .img {flex：1 ;}。container .item .txt {flex：0;背景：#fff; color：＃900;}
< div class =容器> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / DIV> < div class =item> < div class =img>图片< / div> < div class =txt>一些文字< / div> < / div>< / div>
I'm trying to create the attached layout, but am having difficulties.
It's based on this layout:
Layout example from not-studio.com
The main thing with the example is that all of their images are created to the exact specs to make the grid alternate in size.
I'd like to be able to:
• Use any image size and have it be cropped to the containing box with the overflow hidden
• Have the width/height of the containing box and image scale proportionally as you shrink the browser.
• Not rely on any plugins if possible.
What I have tried so far is:
• Flexbox
• Floats
• Max/min heights with negative top margin
• Using padding and absolute positioning as in this example
Any thoughts on how to achieve this in the cleanest way possible?
Here is a start for you. Now you can fill each item with images, adding text etc.
html, body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100%;
min-height: 500px;
}
.container .item {
height: calc(16.6% - 20px);
background: #eee;
margin: 10px;
display: flex;
flex-direction: column;
}
.container .item:nth-child(12),
.container .item:nth-child(10),
.container .item:nth-child(7),
.container .item:nth-child(5),
.container .item:nth-child(4),
.container .item:nth-child(2) {
height: calc(33.3% - 20px);
}
.container .item .img {
flex: 1;
}
.container .item .txt {
flex: 0;
background: #fff;
color: #900;
}
<div class="container">
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
<div class="item">
<div class="img">
An image
</div>
<div class="txt">
Some text
</div>
</div>
</div>
这篇关于挑战布局 - 如何实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
