CODEWITHSUNDEEP
jquerycsshtml
derek_duncan
derek_duncan

Reputation: 1377

<img> to cover allotted space

I a attempting to span 3 images horizontally across the page. I need these to act like css background-size: cover; would. The two outer images behave fine because their aspect ratio allows the height to fill the the empty space. However, the bear picture does not replicate the same behavior because of its aspect ratio.

I need this picture to stretch until it reaches the full height of the box. If it exceeds the box's width, the excess will just be hidden by overflow: hidden;. How do I accomplish this is responsiveness in mind(scaling images(%) when window is resized.)

Here is my code: 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%;
}
}

enter image description here

Upvotes: 1

Views: 297

Answers (1)

Marc Lloyd
Marc Lloyd

Reputation: 304

As the images are variable height you'll need to fix the height of their containers. Try this:

.albumn{
    overflow:hidden;
    width:33%;
    height:200px; /*The height you want the images*/
}
.albumn img{
    height:100%;
    width:auto;
    display:block;
    margin:0 auto;
}

Upvotes: 2

Related Questions