HTML & CSS IMAGE HANDLING – PART 1
Hi, this is Nico from Trick Gaming Studios.
I have been working on some web projects and wanted to share with you a series of posts about custom image handling.
HTML/CSS image manipulation with cross-browser compatibility:
IE – Firefox – Chrome – Safari.
Some of the typical cases of image manipulation we may find when developing web projects:
1.- Background, always centered even after modifying screen size. Style located body tag.
HTML
<<html><head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head><body class=”custom_image“></body></html>
CSS
.custom_image {background: url(image.png) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}
2.- Force an image to adapt to a fixed size regardless of its original dimensions. An example of this situation can be seen below and how we can handle it both with HTML or CSS:
In this case, the left image (isologotype) and the right image (isotype) have different dimensions. By using the code below, we can force their size to be the same:
Both images are centered on the screen because the style is declared in the margin-left: auto and margin-right: auto. It is always convenient to separate CSS and html by identifying each component by its respective name of “class” or “id”.
HTML<html><head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head><body style=”background-color:#999;”><img class=”custom_image” src=”image.png”></body></html>
CSS
.custom_image {width:170px;height:150px;border-width:thick;background-size:cover;background-repeat:no-repeat;display:block;margin-left:auto;margin-right:auto;}