Images adopting different sizes

I adjusted as much as I could the css for the large images, at the moment only for the first (Bruges) and the last but one (Alberobello) but I’m still not happy with the way the imagea behaveas they gets smaller. I guess it has to do with not quite knowing how to deal with podsition:absolute with all corners on “0” to start with.

<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
body       {
    margin:auto; /* will refer to the position lengths */
    padding:10px 10px;
    border:25px solid #00371C;
@media screen and (max-width:1050px){
img{ width:90%}

@media screen and (max-width:500px){
img{ width:80%}
<img src="AlberobelloB.jpg" alt="">

Another problem is that I don’t understande why the last images in the bottom row are higher than the first of the row when they all have the same physical mesurements and the same width/height in the css.

Not according to the information I see.

Hi TechnoBear

Thank you for dropping in.

the 234x156 is the measuremnets of the thumbnails in the bottom row. the 933 x 700 are the larger images .

If you look at the name of the pictures the ones with a trailng “S” are the small; the ones with a trailing “B” are the big.

The thumbnails in the html are all with the reduced size (unless my head has gone beyioond what I thought…). The images in the redirected files that conyain the single large image have pictures wth trailing “B” to be diaplyed when you click on th thumbnails.

I guess there is something so obvious that I can’t see it! Can you expand your comment, please?


Yes, I am going blind!!! I had put the large images in the html instead of the smaller ones! And I’ve been looking at this for THREE days! That problem solved!

Now what about the responsive code for the larger images: code above.

The screen-shots I posted are of the information I see when I click each of those “thumbnail” images in the last row and view image info. Looks to me as if you’ve accidentally used the full-size images in there instead of the thumbnail images.

Edit: Ninja’d - the penny dropped while I was typing.


We crossed messages. I saw the problem and it is solved. Many thanks!

Could you look at the other issue, please?

Sorry - you’ll need to explain what it is you’re unhappy with about those images.

I put the code above for, e.g.

This is the page that opens when you press the very first thumbnail. Because the large images did not display centrally in a couple of browsers, I was given very kindly some code to solve that problem based on

margin:auto; /* will refer to the position lengths */
padding:10px 10px;
border:25px solid #00371C;


Nowm the porblem is that I was not very successful in the media quries and wonder what I can do to make it fully responsive,

If I’ve understood you correctly that you’ve only added the media queries to the first and penultimate images, then I don’t see a problem. They seem to respond OK to different viewport widths.

(I do think you’re making a huge amount of unnecessary work for yourself by using embedded CSS in each page, rather than an external stylesheet, but presumably you’ve already been told that.)

Hi, well I feel that the margins are being cut and things don’t move steadily, but if you say they seem ok to you…

Are you referring to large images? You mean I could have ONE single separate stylesheet just for the large images, and then what do I put in the html?

You can use the same CSS document you use for the rest of the site and just add the styles to that.

Or if you really want to keep them separate for some reason, then yes, create a new stylesheet for the photogallery, including the large images.

If you add a class to the <body> tag on the large image pages, you can add that class into the CSS rules, so that you only apply that background colour and image rules to the appropriate pages.


I think I follow you… In fact, that was basically what I had to start with but…

The main reason for the separate stylesheets was

a) principaly because the large images did not get centred by a couple of browsers

b) because maybe later I want to give a different background colour to each photo, although I guess that could eventuall by done inline in the html

Presumably not a different colour for each of those 50 images, but a selection of background colours. In which case you can give the body for each image a class of “blue”, “green”, “red” or whatever, and set the colour for that class in the CSS. (I would not normally suggest using a colour as the class name, in case you want to change the colour at a later date. But in this instance, it strikes me as the easiest solution. You can see at a glance which colour the page is using, and if you want to change the colour on a single page, you can just change the class.)

What about getting the large images to get centred in the browsers that float them to the left?

Which browsers are you seeing that behaviour in? I’ve only tested Firefox and it seems fine to me.

There is an earlier thread on this. i will look for it. I think it was IE9, Chrome and Safari (for Windows)
Found it:

In fact, I?ve realized that Opera and FF display in the middle: Chrome, IE9 and safari on the left.

Was that not just referring to the native positioning of the large image, without embedding it in an HTML page?

In any case, Safari for Windows is long dead, so I suggest you stop worrying about that one.

I don’t have IE handy to test just now, but Chromium on Linux is displaying the same as Firefox on Linux.

originally the large image was launched directly from inside the main html. Because of the positioning in certain browsers I looked for an answer in Sitepoint forums and came up with the code that you see in the first post of this thread

I understand all of that.

I’m trying to establish which browsers that code is causing issues with, as I can’t reproduce it here.

I’m not seeing any images floated to the left in Firefox, Chrome or IE9 - 11.

Is this the page you are still referring to?

Hi Paul

No, now everything has been sorted out with the code in the first post. Before, when those additional pages did not exist and the large images were called directly from the main html, then yes different browsers dipslayed differently.

Now, it’s just a chat with TechnoBear about what could be an alternative suggested by him.

My only “problem” now id the way the quesries are working in the pages for the large images, but there again TechnoBear thinks it’s fine,

If you take asway the positioning from the Bruges.html you’ll see what happens to those images