Resize Images Using CSS

This is an older CSS trick that is worth repeating. Back in the days, resizing images was done via HTML height and width options. Here’s an example below. We will resize the image to 100 x 100 pixels.

HTML

<img src="example.jpg" width="100" height="100" alt="example" />

The problem with this approach is, first, we will lose image quality when resizing regardless of which direction we go, either up or down. The resized image is never going to be as good as the original. Second, there’s a good chance the image will NOT be proportioned. We have to be constantly be aware of image ratios when resizing images.

CSS

So, here comes CSS to the rescue. We will assign a class called “image” to our image.

<img class="image" src="example.jpg" alt="example" />

Next, we will apply CSS to our “image” class.

.image { width: 400px;height : auto; }
.image { width: auto;height : 600px; }

The result is, a well-porportioned image that is never going to be wider than 400px or taller than 600px. In addition, we maintain the standard dimension for all images using the “image” class.

Password and Text Boxes Are Not Of Equal Length

Why is the password field smaller than the input field in Internet Explorer 8? It’s the same in previous versions of the browser? I was recently working on a project that required authentication. I styled the login page. Everything looked wonderful. Perfect as a matter of fact, until I opened IE8. Wicked ugly. My main gripe really is, why is the password field smaller than the input fields?

I did a quick search online and found a solution.

You can style the input field to a certain width, like in this example.

input { width:12em; }

I’m using em instead px, because it’s probably more accurate.

But, styling the input field, like the one above, will make changes to every input field on the site. So, the quick and dirty way to style a login page, is to use inline CSS. In this example, we will use two input fields of text and passwords with inline styling.

<form>
<input type=’text’ name=’username’ style=’width:12em’ />
<input type=’password’ name=’password’ style=’width:12em’ />
</form>

So, there you have it. A quick and dirty solution to the uneven password and text input fields in Internet Explorer 8. If you have any other solutions, please let me know. I’ll be happy to hear about it.