Scaled images

HTML & CSS
1

Hi
http://pintotours.net/Europe/Spain/foodBcn.html

I ran a file in GTMetrix and it tells me that an image is not scaled. In the HTML the size is exactly that of the image. And in the css I can’t see anything affecting directly the size of the image.

Why is the error coming up, and how can I solve it, please?

Thanks

2

Ok I see what is ahappening, but not the solution!

The image has one screen size as a pop-up and another as a full page…

3

Hi,

The image is this one as listed above.

http://pintotours.net/Europe/images/tapas2.jpg

Its natural dimensions are 599px x 398px but in your normal width page you are displaying it at a max-size of 406px x 306px. Therefore the check you ran is informing you that you would be better off with an image that is 406px x 306px to start with.

The image is scaled to fit with this rule:

.img-container img {
    height: auto;
    max-width: 100%;
    position: static;
    width: auto;
}

However, what the checker failed to notice is that at smaller screen sizes you actually show the image larger when 3 columns go to one so the advice is incorrect.

These automated checkers never know the whole story and so you should use their results as a guide and not as the ultimate truth:)

4

Hi Paul

So, the solution is there is no problem!

Great!

Thanks

5

Hi Paul

I decided to resize the image to the smaller size and now all’s well.

Thanks again

6

Yes, that’s fine but the only downside is that on smaller screen you get the bigger image which won’t look so good. However its always a trade off and a smaller file size is often a better option against slightly lesser quality.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.