CODEWITHSUNDEEP
htmlcss
Rings
Rings

Reputation: 421

Crop picture on resize window

I'm trying to create a div that, when you scale your window, trims the picture. This works, but the image is only trimed on the right, not on the left.

How can I also trim it on the left, so that the picture stays in the middle?

My HTML:

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

And my 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/

Upvotes: 1

Views: 1122

Answers (1)

Paulie_D
Paulie_D

Reputation: 115045

Position the image absolutely as well and center it using 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>

Upvotes: 4

Related Questions