Crop picture on resize window

Question

Я пытаюсь создать div, который, когда вы масштабируете свое окно, обрезает изображение. Это работает, но изображение только обрезается справа, а не слева.

Как я могу также обрезать его слева, чтобы изображение оставалось посередине?

Мой HTML:

<div class="top-foto"> 
    <img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Coverphoto"> 
</div> 

И мой CSS:

.top-foto { 
    position: absolute; 
    z-index: -1; 
    width: 100%; 
    height: 315px; 
    overflow: hidden; 
} 
.top-foto > img { 
    margin: 0 auto; 
    display: block; 
    max-width: inherit; 
} 

http://jsfiddle.net/Rings/quz6a3qq/1/

Answer 1

Расположите изображение абсолютно так и в центре его с помощью translate

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.top-foto { 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 315px; 
 
    overflow: hidden; 
 
} 
 
.top-foto > img { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    display: block; 
 
}

<div class="top-foto"> 
 
    <img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Cover photo" /> 
 
</div>