center image in div with overflow hidden

Question

I have an image of 400px and a div that is smaller (the width is not always 300px as in my example). I want to center the image in the div, and if there is an overflow, hide

Answer 1

None of the above solutions were working out well for me. I needed a dynamic image size to fit in a circular parent container with overflow:hidden

.circle-container {
    width:100px;
    height:100px;
    text-align:center;
    border-radius:50%;
    overflow:hidden;
}

.circle-img img {
  min-width:100px;
  max-width:none;
  height:100px;
  margin:0 -100%;
}

Working example here: http://codepen.io/simgooder/pen/yNmXer

Answer 2

This issue is a huge pain in the a.. but I finally got it. I've seen a lot of complicated solutions. This is so simple now that I see it.

.parent {
  width:70px;
  height:70px;
}

.child {
  height:100%;
  width:10000px; /* Or some other impossibly large number */
  margin-left: -4965px; /* -1*((child width-parent width)/2) */
}

.child img {
  display:block; /* won't work without this */
  height:100%;
  margin:0 auto;
}

Answer 3

I have been trying to implement Jaap's answer inside this page of my recent site, with one difference : the .main {height:} was set to auto instead of a fixed px value. As responsive developer i am looking for a solution to synchronize the image height with the left floating text element, yet only in case my text height becomes greater then my actual image height. In that case the image should not be rescaled, but cropped and centered as decribed in the original question here above. Can this be done ? You can simulate the behaviour by slowly downsizing the browser's width.

Answer 4

working solution with flex-box for posterity:

main points:

1. overflow hidden for wrapper
2. image height and width must be specified, cannot be percentage.
3. use any method you want to center the image.

  wrapper {
    width: 80;
    height: 80;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  image {
    width: min-content;
    height: min-content;
  }

Answer 5

just make sure how you are using image through css background use backgroud image position like background: url(your image path) no-repeat center center; automatically it wil align center to the screen.

Answer 6

You should make the container relative and give it a height as well and you're done.

http://jsfiddle.net/jaap/wjw83/4/

.main {
  width: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  height: 200px;
}

img.absolute {
  left: 50%;
  margin-left: -200px;
  position: absolute;
}

<div class="main">
  <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
</div>
<br />
<img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />

If you want to you can also center the image vertically by adding a negative margin and top position: http://jsfiddle.net/jaap/wjw83/5/