But if @PaulOB has any suggestions to offer, you should take note. He’s far more of an expert than I’ll ever be, and my visual perception can be a bit strange, so things look fine to me which may not to others. So don’t rely on my judgement alone.
You’re too modest!
maybe what I was after was not so much to be proved that my current display is terrible, but that it should be coded differently. the positioning with"0" on all corners was an interesting surprise to me that I expect pulls the image equally in all direction swith the result that it gets centred, but when I start with the queries it’s just trial and error, without really understanding what I am doing…
When you absolute (or fixed) position with the four co-ordinates you basically set the frame size for the absolute element. However if you then give a width to the element there would be an apparent conflict. To resolve the conflict the width of the element is taken as the most important and your element will be that width.
However, the clever part is that if you now give margin:auto to that element it will centre the element within that original frame size described by the 4 co-ordinates you gave it. Even more cleverer (is that a word:)) is that it will centre the element not only horizontally but vertically also.
For this to happen the element being centred needs a width for the horizontal alignment and a height for the vertical alignment. Luckily though replaced elements like images have intrinsic width and height and so they will get centred regardless.
It’s a method I have been pioneering for about 12 years but is still little understood although I have written about it many times in the forums 
1 Like
Hi
Yes, it does the job wonderfully. But does it work in media queries? or more to the point, are my MQ on this page
http://pintotours.net/Gallery/Bruges.html
good enough?
What difference does the media query make?
I don’t understand the question. CSS works just the same inside or outside a media query.
They seem to scale ok but as you are adding padding and borders to them then they will eventually be too big to fit in the window as they will exceed the available width.
You may want to set the border-box model to constrain dimension within the width.
e.g.
img{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
Great! Thanks
I’ve added it to http://pintotours.net/Gallery/Alberobello.html and it works prefectly!
Many thanks, Paul
Shame on me, letting that slip my mind! 
Like in qim’s thread here: centering-external-images-in-the-screen #18 where I without thinking further used margin/position to allow the 100% image width.
No wonder I was confusing! Sorry qim!
Hi Eric
Your help was very valuable to get the pages working, in the first place.
Thanks
Hi Paul
A slight problem…
I’ve added the code to all the files but now I notice that when to MQ @1050 kicks in the height increases disproportionately and goes off top and bottom
I tried to get rid of the MQ altogether but then the page is not responsive at that width.
Sorry…
Which page are we looking at ?
When the window is bigger than 1050 then the image reverts to 100% and will therefore just get bigger and bigger depending on how wide the viewport is.
Why don’t you just set a max-width.
e.g.
img{max-width:900px}
Of course you should really use a class if you are going to include this code in a stylesheet,
Hi
I really don’t understand this code… not tonight, anyway; maybe with a fresh head tomorrow.
I changed a few things, introduced more break-points and it works better but I still feel that the code could be better.
Now, the only one that I changed is http://pintotours.net/Gallery/Venice2.html
The other problem is that in the queries the image (with the borders) is not taking up all available screen space making it very small for small devices.
You can loose some padding/borders in smaller than image screens. E.g. like in earlier posted code:
<!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">
<style>
body{
background-color:#143D29;
}
img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; /* will refer to the position lengths */
padding:10px 10px;
border:25px solid #00371C;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
/* comma separated shadows combines. same gives deeper darkness */
box-shadow:5px 5px 15px #000, 5px 5px 25px rgba(0,0,0,.5);
width:100%;
max-width:525px;
}
@media screen and (max-width:595px){/* width+padding+borders */
img{ padding:5px; border:0;}
}
</style>
</head><body>
<img src="Venice2B.jpg" alt="">
</body></html>
Great! That looks great.
I only changed the max-width to 600px to make it larger at full screen.
Many thanks, Erik
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.