How to Resize or Scale your image using CSS

There are many best ways to scale the images for your site. We can use the php resize codes or Jquery resize scripts and others, and one of the best way is to scale the images through CSS. For a demo please check the below code



<*****style type="text/css">
.center-cropped  {
    width: 310px;
    height: 168px;
    background-position: 50% 11%;
    background-size: cover;
 }

<*****div class="center-cropped" style="background-image: url('http://elbadil.com/sites/default/files/styles/428xauto_node_image_2/public/13/08/32/0_73.jpg?itok%3Dk9uRSMGi');">
<******/div>


Note: remove ******


In the above code background-size acts as the center point, I just need a whole cover section, but we can use contain or auto or anything as per your needs.

Check the background-position too. I made as 50: 11 Percentage ratio. You can set the height and width and by this there wont be any stretch in the image. But the whole concept will make the load time bit high when compared to resizing :)