Css crop image

How to crop images in css

img{
	object-fit: cover;
}

Image crop using css 1:1

.img {
	object-fit: cover;         
  	object-position: 100% 0;  //move image position in x direction. 
  	object-position: 0 100%; //move image position in y direction.
}

Css crop image

.imgContainerDiv {
  overflow: hidden;
}

Style image so it crops

.alligator-turtle {
  object-fit: cover;
  object-position: 100% 0;

  width: 300px;
  height: 337px;
}

Source: alligator.io

Similar codes

0 vote134 views1 answer
Horizontal scroll only css mobile
CSS
0 vote144 views1 answer
Service Worker Navigator check
CSS
0 vote139 views2 answers
Skeumorphism box shadow
CSS
0 vote131 views2 answers
Counter-style counter css counters
CSS
4 votes159 views3 answers
How to not underline links in css
CSS
0 vote146 views1 answer
Canvas disable antialiasing
CSS
0 vote144 views1 answer
Flex: 0 1 auto
CSS
3 votes127 views2 answers
Move css background image
CSS
17 votes147 views2 answers
Solved - gulp : File C:\Users\Tech\AppData\Roaming\npm\gulp.ps1 cannot be loaded because running scripts is disabled on this system.
CSS
9 votes154 views4 answers
How to stop form from submitting on enter
CSS