Image resizes

[squeak24]

OK, I have a Image that I want to resize when the Browser is made smaller. This will also be key when the person viewing the site on a smaller screen.

At the moent I have tried the following in CSS:

.img-resize {
position: absolute;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: 1;

Any ideas what I need to do to get this working?

[diafol]

You're talking about a responsive image? Useful article here: http://alistapart.com/article/responsive-images-in-practice

[gentlemedia]

All you have to do is place your img tag in the HTML without the width and height attributes

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

Your CSS will just be like this:

img {
    max-width: 100%;
    height: auto;
}

But resizing your images in the browser smaller for smaller screens like this will keep the filesize of the image the same, so you're serving too large images for smaller devices which takes way much longer too load then if it was sized properly and it cost your, or your clients', customers more data usage and therefore more money to view the webpage on a smartphone. And there are a lot more downsides by just using this simple method.

The way forward is using the picture element and/or scrset and sizes attributes.
https://responsiveimages.org/

[squeak24]

Thanks for the info, I will crack onto it now. It is primarily for Internal purposes, hence I know the screen size it is intended for. But there could be chances it will be viewed on smaller screens.

Thanks for the advice.