How to center crop the image with a div using CSS?

Photo by vulpe gri on Unsplash

How to center crop the image with a div using CSS?

If you would like to crop the image without cropping on actual image, you can able to archive using "css" and put the image inside the center of "div". This is quite useful for single image to show specific focus point without uploading another cropped image. 

 

Create custom CSS style as below:

<style>
.divimg{
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

img{
  position: absolute;
  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;
  margin: auto;
}
</style>

 

Apply the above CSS sytle on HTML:

<div class="divimg">
  <img src="https://filedn.com/lqsccqN8JwxyH3zkBtj2YIX/blog/images/nov21/Understanding-File-Permissions-on-Linux-Server.jpg" width="100%" height="auto" />
</div>

 

Example: Center cropped and full-width image

Understanding File Permissions on Linux Server

 

 


What is zitURL - shorten link?

zitURL - shorten link is a completely free tool where you can create short links, which apart from being free, you get paid! So, now you can make money from home, when managing and protecting your links. Register now!

Shorten URLs and earn money

Signup for an account in just 2 minutes. Once you've completed your registration just start '. 'creating short URLs and sharing the links with your family and friends.