I’ve been so busy researching and writing content I haven’t had time to keep up with the latest technology. I just discovered “Responsive Web Design” and “Flexible Images,” and I still need to convert my database queries to PDO and maybe convert my web pages to HTML5. It sounds a little overwhelming.
The good news is I just discovered the CSS image style max-width: 100%. It’s so simple and useful it blew me away. But there’s one problem.
My code specifies the image’s size: <img src=“whatever” width=“500” height=“400” alt=“Something”>
If I apply the style (max-width: 100%) and put the image in a div measuring 100pixels wide, the image correctly scales down to a width of 100 pixels, but the height remains stuck at 400pixels. How do I fix that?
Conversely, I should ask if it’s necessary to specify the width and height in the code in the first place, since it works fine without it. As I recall, the only problem I’ve ever had removing it is that my pages won’t validate.
And since I’m thinking of converting to HTML5, does it require me to specify an image’s width and height?
if it’s necessary to specify the width and height in the code in the first place
No, it isn’t necessary. Its only real use is for when the page is loading. If it’s there, the page will load with a space for the image even before it has loaded. Otherwise, you sometimes see a page jumping all over the place as the images gradually load, which can be quite annoying. But still, in the responsive design era, I’m inclined not to include the width and height in the HTML.
Indeed, the latest IE’s are doing it better. - It’s not Windows: the same browser scaled images are better in Firefox than IE7.
Note: Paint programs are better equipped for scaling than browsers > a max-width (and/or min-width) for auto-adapting images can be helpful.
But unless a visitor is calling the image-address directly (in the original size), a visitor cannot compare the scaled browser result with the original quality.
