Reflowなしレスポンシブ

by FiNGAHOLiC

HTML

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

<div class="mod-imgset">
    <div class="mod-imgset-img"></div>
    <div class="mod-imgset-txt">説明が入ります説明が入ります説明が入ります説明が入ります</div>
</div>

CSS

.mod-imgset {
    margin-bottom: 20px;
}

.mod-imgset-img {
    background-image: url(http://placekitten.com/g/2000/1000);
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 10px;
    padding-bottom: 50%;
}

.mod-imgset-txt {
    font-size: 12px;
}