Image Resizing using CSS with HTML

Why...???

In web development, we have to use images in our website. Usually, for the users display picture, users uploaded pictures, picture collection etc.

We can't allow the user to upload any size image which disturbs our website look and it results in failure of our website design. So, we recommend users to upload the image with our own specified dimensions or size of the file which don't disturb our website design.

But, also we think we should re-size the image when user uploads it without restricting him. As, non-important applied restrictions to the users will disturb the users behavior which results in the less visits and less recommendation by them.

So, try to use such techniques which allow users to navigate/visit freely in your website. So, try to use CSS re-sizing of image with HTML/HTML5.

How...???

The following code will show how to re-size any image in 399*300 size and the image is floated on left side.

<style type="text/css">

.imgBox{
    float: left;
    height: 300px;
    width: 399px;
}
.imgBox .toCenter{
    background: none repeat scroll 0 0 #FFFFFF;
    height: 300px;
    width: 399px;
    
    position: absolute;
    overflow: hidden;
    display: table;
}
.toCenter > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}
#imgSize{
    max-height: 300px;
    max-width: 399px;
}

</style>

<div class="imgBox">
    <div class="toCenter">
        <div>
            <img id="imgSize" src="autumn.png" />
        </div>
    </div>
</div>

Change according to your requirement

• Change height, max-height, width, max-width according to your requirement. This will specify the box in which you will bound the image to display.
• Change the background color according to your website theme, here i used white background i.e. #FFFFFF.
• Change the source image name in image tag with your image path. i.e
  <img id="imgSize" src="_____________" />

Feel free to comment with your questions and suggestions regarding the post content...!