how to get an image to crop in center

Question

I made my post thumbnail images of full width and responsive. Because they were so tall, I gotthem cropped at 600px. The problem is that as the screen gets bigger the images crop at the top, not in the center of the image as I want it. Is there any way to make the images crop in the center? I don't want to use background-image here.

Here is a fiddle.

.large-front-thumbnail {
position: relative;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.large-front-container {
    max-height:600px;
    overflow: hidden;
}

<div class="large-front-container">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail">
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:08

.large-front-thumbnail {
    position: relative;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    transform: translateY(-50%); /* add this line to move your picture 50% up*/
}

To use in all browsers:

     transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);

But I'd suggest you to use background-image case described here

how to get an image to crop in center

1 Answers1