0

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?

3
Contributors
3
Replies
22
Views
2 Years
Discussion Span
Last Post by squeak24
2

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/

Edited by gentlemedia

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.