响应式CSS图/图像网格

Question

您将如何构建响应图像网格，图像高度和宽度不尽相同。建议的解决方案将需要纯粹在CSS和工作在IE9及以上。

理想情况下，图像应该尊重分配给它们的宽度，但它们的高度应该是相同的值，直到到达移动视口。对于移动视口，图像将作为块元素堆叠。

对于这个例子，我使用了一个包含图像和与图像相关的标题的图形元素。

例HTML结构：

<div> 
    <figure class="landscape"> 
    <img 
     src="http://placehold.it/750x500/e8117f/ffffff" 
     alt="" 
     > 
    <figcaption> 
     Image Caption 
    </figcaption> 
    </figure> 
    <figure class="portrait"> 
    <img 
     src="http://placehold.it/300x500/efc63e/ffffff" 
     alt="" 
     > 
    <figcaption> 
     Image Caption 
    </figcaption> 
    </figure> 
</div> 

当前HTML和CSS： JSFiddle

在参照图像的下方贴：与尺寸750×500的图像需要以填补所概述的间隙虚线描边与300x500尺寸的图像高度相同。

Answer 1

一个简单的方法来做到这一点是Flexbox的。缺点是ie9不支持flexbox。

/* Body */ 
 

 
body { 
 
    background-color: #fff; 
 
    margin: 0; 
 
} 
 

 

 
/* Container */ 
 

 
div { 
 
    display: block; 
 
    font-size: 0; 
 
    margin: 0 auto; 
 
    max-width: 1050px; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: stretch; 
 
} 
 

 

 
/* Figure */ 
 

 
figure { 
 
    display: block; 
 
    margin: 0 auto 20px auto; 
 
    vertical-align: top; 
 
} 
 

 
.landscape { 
 
    max-width: 750px; 
 
} 
 

 
.portrait { 
 
    max-width: 300px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 95%; 
 
} 
 

 
figcaption { 
 
    background-color: #fff; 
 
    border: 1px solid #eee; 
 
    border-top: none; 
 
    border-radius: 0 0 2px 2px; 
 
    color: #888; 
 
    font: 12px arial, sans-serif; 
 
    margin-top: -4px; 
 
    padding: 10px 5px; 
 
    text-align: center; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    figure { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
    } 
 
    figure:nth-child(even) { 
 
    margin-right: 0; 
 
    } 
 
    .landscape { 
 
    width: 60%; 
 
    } 
 
    .portrait { 
 
    width: 40%; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1024px) { 
 
    /* Placeholder */ 
 
}

<div> 
 
    <figure class="landscape"> 
 
    <img src="http://placehold.it/750x500/e8117f/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="portrait"> 
 
    <img src="http://placehold.it/300x500/efc63e/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="portrait"> 
 
    <img src="http://placehold.it/300x500/efc63e/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
    <figure class="landscape"> 
 
    <img src="http://placehold.it/750x500/e8117f/ffffff" alt=""> 
 
    <figcaption> 
 
     Image Caption 
 
    </figcaption> 
 
    </figure> 
 
</div>