1

ページ全体で 3 つの画像を水平にまたがろうとしています。CSSのように動作するには、これらが必要background-size: cover;です。外側の 2 つの画像は、縦横比によって高さが空のスペースを埋めることができるため、正常に動作します。ただし、クマの画像は縦横比が原因で同じ動作を再現しません。

ボックスの高さに達するまで、この画像を伸ばす必要があります。ボックスの幅を超える場合は、余分な部分が で隠されoverflow: hidden;ます。これを達成する方法は、応答性を念頭に置いています（ウィンドウのサイズが変更されたときに画像（％）をスケーリングします。）

これが私のコードです: HTML:

<section>
    <div class="albumns">
        <article>
            <div class="albumn a1">
                <%=image_tag("mount.jpg")%>
            </div>
        </article>
        <article>
            <div class="albumn a2">
                <%=image_tag("bear.jpg")%>
            </div>
        </article>
        <article>
            <div class="albumn a3">
                <%=image_tag("mount.jpg")%>
            </div>
        </article>
    </div>
</div>
</section>

CSS:

.albumns {
position: relative;
}
.albumn {
width: 100%;
float: none;
& img {
    width: 100%;
}
}

ここに画像の説明を入力

4

1 に答える 1

2

画像は可変の高さであるため、コンテナの高さを修正する必要があります。これを試して：

.albumn{
    overflow:hidden;
    width:33%;
    height:200px; /*The height you want the images*/
}
.albumn img{
    height:100%;
    width:auto;
    display:block;
    margin:0 auto;
}
于 2013-03-06T22:12:16.100 に答える