0

I have a div with the form of a circle and a square image in that div. I would like the parts of the image that fall outside of the div, to not be displayed (so not resize the image or make a circle out of the image; but instead not show its parts outside the circled div). How can I achieve this with CSS?

I have the following:

<div className="divimage">
    <img src="image.jpg"/>
</div>

.divimage {
    width: 200px;
    height: 200px;
    border: 25px solid transparent;
    border-radius: 50%;
    display: inline-block;  //I need this for the carousel to work in which I'm using this
    position: relative;
    img {
        max-width: 200px;
        max-height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }
}
Nick
  • 3,496
  • 7
  • 42
  • 96
  • Does this answer your question? [How to trim off Image in CSS?](https://stackoverflow.com/questions/26101774/how-to-trim-off-image-in-css) – computercarguy Dec 17 '20 at 00:25

1 Answers1

1
.divimage {
    /* ... */
    overflow:hidden;
}

Also, you can't nest CSS selectors, so extract the img declaration.

Alex
  • 34,899
  • 5
  • 77
  • 90