Images no longer side by side

HTML & CSS
1

Hi
I’ve been experimenting with some code that will open a larger image of the thumbnail. I am sure there are better ways, but I managed to do it, except that the thumbnails no longer stayed side by side.

http://pintotours.net/CCC/MMM.html

That was due to the figcaption. By taking it out all’s well, but how do I place a caption, now?

Thanks

2

Hi there qim,

I cannot figure out your obsession with the “figure element”. :confused:

Nevertheless, this works OK and validates…

[code]

Photographic album figure { display:inline-block; vertical-align:top; margin:10px 1%; max-width:23%; } figure a { color:#000; text-decoration:none; } figure img { width:100%; height:auto; border:0; } A view of the pulpit rock in Norway. A view of the pulpit rock in Norway. A view of the pulpit rock in Norway. A view of the pulpit rock in Norway. [/code] My preference though is to use a list... [code] Photographic album ul{ padding:0; margin:0; list-style-type:none; } li { display:inline-block; max-width:23%; margin:10px 1%; vertical-align:top; } li a { color:#000; text-decoration:none; } li img { width:100%; height:auto; border:0; } [/code]

coothead

3

Thanks coothead

Time for bed, here. I’ll work on it tomorrow.

4

Hi coothead

You were right, as usual!

I’m having problems with <figure>

a) It does not work with IE8

b) the images are being resized in html/css and I want to serve scaled images

I started to try your code, the IE8 problem is solved, but I still have the issue of the scaled images.

http://pintotours.net/DDD/try2.html

What’s the solution?

I expect this is due to

max-width:23%;

Thinking aloud… and wonder if by using the code, I have ion other pages: img-container{} will be the way out. I certainly don’t have this scaling problem in the other pages.

My images are 240x160 and stated so in the htnl
When I look at their properties in the displayed page they are 234x156
a nd when I test the page in GTMetrix it claims they are 194x129

I don’t understand anything!

Thanks

6

Hi there qim,

the image width of 235px is predetermined, at the outset, by your code. :smile:

#wrap            - max-width:1200px
#main            - width:100%          -         1200px
#gallery         - width:85%           -         1020px
#gallery-inner   - max-width:1020px
#gallery li      - max-width:23%       -         234.6px
#gallery li img  -  width:100%         -         235px

coothead

7

Yes IE8 has certain problem with the figure element as mentioned in my post in this old thread.

The images are resized to fit the parent div which is 23% ( as coothead said above) so that’s what size they will be. They can’t be bigger than their parent or they would stick out :smile:

What’s wrong with that approach?

8

Hi Paul

Speed is of the essence!

My understanding is that the images should always be served with the exact measurements so that the browser does not waste time readjusting them

Is this not so?

And is there a way to solve it (I still have to spend time digesting coothead’s post) as in my other pages I do not have this problem.?

Should I make all images 235 x 156 to start with?

Ans why does GTMetrix claim they are 194x129?

9

Thanks coothead

I understand the problem now, even if I have not got my haed round understanding why I do not have this problem in the other pages i.e. http://pintotours.net/Europe/Spain/Barcelona.html

I suppose, like Paul said, because they are not close to the maximum, and therefore there is no danger that they will stick out. Is that it?

10

Hi there qim,

You do not have a problem with the page in question. :smirk:

You just think that you do. :smile:

coothead

11

Hi

Are you saying, by that, that it makes no difference to the loading of the page whether the images are scaled or not?

You’ve told many times that SEO is a load of nonsense, but I have my doubts.

12

Hi there qim,

by all means be a slave to S.E.O. if that brings you inner peace. :sunglasses:

Put your oversized images into your chosen editor and resize them to 235x156.

Change your HTML to reflect your endeavours.

Then sit on the floor cross legged and repeat OM until enlightenment.

coothead

13

Hi thanks coothead

In fact, I’ve done that already and solved half the problem. The other half may not be a problem as it does not make sense: GTmetrix keeps saying that the images are being resized by the browser to 194 x 129. I wish i could understand where they got those measurements from.

To test I took out. altogether leaving only the inverted commas, 2 of the 4 measurements in the html and surely GTmetrix complained about those stating that they should be included at 234 x 155

Now if you have an answer for that, you’ll get a medal!

14

My guess would be that whatever browser size they’re testing at is such that your 23% max-width works out at those dimensions.

If I resize my browser window to 1024px wide, I see

234px × 155px (scaled to 191px × 126px)

when I view the image info in my browser.

15

Hi

I’ve been using GTMetrix for a long time and find it very useful to point out when I have forgotten to include width/height of images and when they are wrong.

I NEVER had thses discrepancies with them.

16

Hi there qim,

there is no problem with your page.
There is no problem with your page.
There is no problem with your page.

Why don’t you enquire of your good friend mr. G.T.Metrix, the
dimensions of the browser that he uses to test your page. :mask:

coothead

17

Have you used % widths before? Have you made a responsive layout before?

My point is, that irrespective of what actual dimensions GTMetrix are using, anybody visiting your page with a browser width narrower than about 1200px is going to be seeing those images at a scaled-down size. That’s what your code does - it tells the browser to scale the image.

18

Yes! All my pages are now responsive and as such use percentages.

To answer coothead above: I have already sent a message to GTMetrix.

19

That’s nonsense and in RWD 99% of images are now resized by the browser. It takes little effort for the browser to do that. Otherwise you would need 1280 images for a 1280px monitor if you want to size them all to fit at each pixel :smile:

If you are using an image at only a fixed height and width then it makes sense to have that image display at its native size. However if you have a flexible layout that image will vary in size to fit the layout which is perfectly acceptable.

1 Like
20

Understood!

Thanks Paul.

21

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