How can I remove bottom of image-CodePudding

how can I remove or cut the bottom piece of an image so that it's hidden instead of sticking out of the div? (I have an image of a phone and instead of the bottom piece sticking out of the div I want it to be hidden) any suggestions? (p.s. I've tried max-height and overflow hidden)

CodePudding user response：

.no-overflow {
  width: 100px;
  height: 100px;
  border: 5px solid black; 
  
  position: relative;
  overflow: hidden;
}

.overflow {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  margin-top: 10px
}

<div >
  <img src="https://unsplash.it/200/200">
</div>

<div >
  <img src="https://unsplash.it/200/200">
</div>

Do this if there's no content other than the image. If there is, you'll have to crop the image yourself to replicate the effect

CodePudding user response：

Cut it out in photoshop and save in your pc