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 it.

Note: I must keep the position:absolute on the image. I'm working with css-transitions, and if I use position:relative, my image shakes a bit (https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/).

jsfiddle http://jsfiddle.net/wjw83/1/

Answer 1

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 2

Found this nice solution by MELISSA PENTA (https://www.localwisdom.com/)

HTML

<div class="wrapper">
   <img src="image.jpg" />
</div>

CSS

div.wrapper {
  height:200px;
  line-height:200px;
  overflow:hidden;
  text-align:center;
  width:200px;
}
div.wrapper img {
  margin:-100%;
}

Center any size image in div
Used with rounded wrapper and different sized images.

CSS

.item-image {
    border: 5px solid #ccc;
    border-radius: 100%;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    overflow: hidden;
    text-align: center;
}
.item-image img {
    height: 200px;    
    margin: -100%;
    max-width: none;
    width: auto;    
}

Working example here codepen

Answer 3

For me flex-box worked perfect to center the image.

this is my html-code:

<div class="img-wrapper">
  <img src="..." >
</div>

and this i used for css: I wanted the Image same wide as the wrapper-element, but if the height is greater than the height of the wrapper-element it should be "cropped"/not displayed.

.img-wrapper{
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}
img {
  height: auto;
  width: 100%;
}

Answer 4

Most recent solution:

HTML

<div class="parent">
    <img src="image.jpg" height="600" width="600"/>
</div>

CSS

.parent {
    width: 200px;
    height: 200px;
    overflow: hidden;
    /* Magic */
    display: flex;
    align-items: center; /* vertical */
    justify-content: center; /* horizontal */
}

Answer 5

you the have to corp your image from sides to hide it try this

3 Easy and Fast CSS Techniques for Faux Image Cropping | Css ...

one of the demo for the first way on the site above

try demo

i will do some reading on it too

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/

Answer 7

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 8

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 9

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 10

this seems to work on our site, using your ideas and a little math based upon the left edge of wrapper div. It seems redundant to go left 50% then take out 50% extra margin, but it seems to work.

div.ImgWrapper {
    width: 160px;
    height: 160px
    overflow: hidden;
    text-align: center;
}

img.CropCenter {
    left: 50%;
    margin-left: -100%;
    position: relative;
    width: auto !important;
    height: 160px !important;
}

<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>

Answer 11

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 12

<html>
<head>
<style type="text/css">
    .div-main{
        height:200px;
        width:200px;
        overflow: hidden;
        background:url(img.jpg) no-repeat center center
    }
</style>
</head>
<body>
    <div class="div-main">  
    </div>
</body>