CSS Center Image in a Clipped Parent Div

CSS center image in a clipped parent div

http://codepen.io/gcyrillus/pen/BdtEj

use text-align , line-height , vertical-align and negative margin. img virtually reduced to zero, will center itself.

.wrapper {
  width:300px;
  text-align:center;
  line-height:300px;
  height:300px;
  border:solid;
  margin:2em auto;
  overflow:visible; /* let's see what we slice off */
}
img {margin:-100%;vertical-align:middle;

  /* to show whats been cut off */
  position:relative;
  z-index:-1;
}

For horizontal only :

  .wrapper {
      width:300px;
      text-align:center;
      border:solid;
      margin:2em auto;
      overflow:hidden
    }
    img {
      margin:0 -100%;
      vertical-align:middle;
    }

How to place image inside of a parent div properly

I achieved this by absolute positioning and ::before selector. Also I added border radius to the image with a max width.

HTML:

<div class="mainInfo">
  <div class="circle">
    <img src="https://picsum.photos/200" />
  </div>
</div>

CSS:

.mainInfo{
  background-color: #fff;
  border: .01rem round #e0e1ed;
  border-radius: 20px;
  color: #585CA1;
  width:100%;
  height:5em;
  box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
  margin-top: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  position: relative;
  width: 8em;
  height: 8em;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}

.circle:before{
    position: absolute;
    content: "";
    width: 15em;
    height: 5em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}

.circle img {
  position: absolute;
  max-width: 85%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

Link to the Demo

center IMG/ inside a DIV with CSS

You can make it work if you wrap another element around the image:

<div class="outer">
    <div class="inner"><img src="" alt="Sample Image" /></div>
</div>

And the following CSS:

.outer {
    width: 300px;
    border: 1px solid red;
    overflow: hidden;
    *position: relative;
}
.inner {
    float: left;
    position: relative;
    left: 50%;
}
img {
    display: block;
    position: relative;
    left: -50%;
}

The position: relative on the .outer is marked with * so it only applies to IE6/7. You could move it to a conditional IE stylesheet if that's what you prefer, or remove the * altogether. It's needed to avoid the now relatively positioned children from overflowing.

How to make an image center (vertically & horizontally) inside a bigger div

Personally, I'd place it as the background image within the div, the CSS for that being:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Assumes a div with id="demo" as you are already specifying height and width adding a background shouldn't be an issue)

Let the browser take the strain.

center and clip image inside div

Try this:

.Image1 { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

How to center an image within a div (both vertical and horizontal) and cut off excess?

Hopefully this helps you with your query. If you have any questions, drop a comment and I'll try to amend my post to suit your needs.

.preview {  background: red;  width: 200px;  max-height: 100px;  display: flex;  align-items: center;  justify-content: center;  overflow: hidden;}
.preview:hover {  overflow: visible;}
.preview img {  width: 150px;}

<div class="preview">  <img src="http://placehold.it/150x150"></div>

CSS: Make image fill parent but not change parent size

UPDATE:
The method I was using (With flexbox) did not do what I wanted finally so I decided to use css grid and it did it perfectly!

Here is the new css (same html):

.ImagesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem;
    width: 100%;
}

.ImagesContainer img {
    width: 100%;
    height: 100%;
}

.ImagesContainer a {
    padding: 5px;
}

Thank you to everyone, your answers helped me understand css better!

center image in div with overflow hidden

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="Sample Image" /></div><br /><img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="Sample Image" />

---

Related Topics