Menu icon Foundation
Images in the same resolution

Hello,

First sorry for my english, I'm french. :)
So, I'd like to fill 2 squared frames for each row with random pictures which are not squared naturally.

The challenge is to crop the image in his middle, horizontally or vertically ( http://puu.sh/6rXPF.jpg ) avoiding to fix the width and heigh of the frame, to keep the picture responsive...

Anyone has an idea ?

Thanks a lot ;)

Florent Merlat florentmerlat.fr

<div class="row">
    <div class="medium-12 columns">
        <div class="row">
            <div class="medium-6 columns">
                <img>
            </div>
            <div class="medium-6 columns">
                <img>            
            </div>
        </div>
    </div>
</div>

imagesimgResponsive

Hello,

First sorry for my english, I'm french. :)
So, I'd like to fill 2 squared frames for each row with random pictures which are not squared naturally.

The challenge is to crop the image in his middle, horizontally or vertically ( http://puu.sh/6rXPF.jpg ) avoiding to fix the width and heigh of the frame, to keep the picture responsive...

Anyone has an idea ?

Thanks a lot ;)

Florent Merlat florentmerlat.fr

<div class="row">
    <div class="medium-12 columns">
        <div class="row">
            <div class="medium-6 columns">
                <img>
            </div>
            <div class="medium-6 columns">
                <img>            
            </div>
        </div>
    </div>
</div>
Brandon Arnold over 5 years ago

This should get you most of the way there. You may want to add a resize event on the javascript, and you can attempt doing it without background images.

http://cdpn.io/KzxaL

Susanna Moore over 5 years ago

To crop image in his middle or with a smaller image resolution (x, y) will enhance the speed performance significantly, but with the trade off of the quality. A higher precision at the cost of speed.

http://www.rasteredge.com/