I ve created a liquid layout for the first time and Im dealing with some problems on displaying images properly and I need your help. For example, on this page the image on the right does not reduce its size when resizing window.
Lineage c4 (Scions of Destiny)
?? Servers ????? ??????? ????? ???????? ????? ?? ????:
Thank you in advance
I must first comment that
I must first comment that this seems a strange way to make a fluid layout, but to each his own.
The image does in fact start to shrink, but not until it's container is less than the image's native width - which is exactly what you've declared.
Images are fixed in size.
wolfcry911 wrote:The image
The image does in fact start to shrink
Eh - what am I missing here? ...what image shrinks?
the images in the left hand
the images in the left hand nav start to shrink when the viewport approaches 1000px and under, while the images in the right column will not start to shrink until that column becomes smaller in width than the image (140px).
Well I stand corrected then.
Well I stand corrected then. I never knew one could size images in that way!
It's interesting; if img
It's interesting; if img attribute dimensions are omitted and the img tag width is declared as relative (width:100%) of a parent width which is also relative or fluid in nature then the image tag will resize along with the actual image which then shows actual image pixel size and specified pixel sizes to be different.
for this to work in IE though you will need to change min-width to plain width
I would be careful though, this layout is slightly left-field and is slightly fragile, you will need to prevent the layout as a whole narrowing too far.
It is also worth noting that
It is also worth noting that your images will only be sharp if they are being shown at 100%, due to interpolation (distortions in the picture detail as one pixel grid is mapped by the browser to another). Interpolation is not such an issue at print levels of image resolution, but web graphics are already optimised and low in resolution, so any interpolation at all is going to have a noticeable effect on the resized image.
I was slightly surprised
I was slightly surprised that the images seemed to hold up so well; in the past when I have played with this the distortions introduced made it little more than a curiosity
To get a good chance of
To get a good chance of minimising distortion through interpolation one would need to start with a reasonably high-res image, which adds to the page loading time of course. It also depends on the interpolation algorithms used by the browser (fractal interpolation being the best), which presumably have been getting better over the years. Thus some people will see a better image than others.
Is this where SVG steps into
Is this where SVG steps into the picture (pun sort of intended )
Not for photos, but for
Not for photos, but for logos and vector graphics then yes.
No not for photos, but gif
No not for photos, but gif type stuff, it's sort of an advanced clipart thing
Scalable Vector Graphics
Scalable Vector Graphics have been around for donkey's years, it's just a case of agreeing web file format standards, equipping browsers with interpretors, and then sitting back and watching M$ ignoring the standards as usual and not adding the necessary interpretor to their browsers as usual. Nothing changes!
Same old story.
Same old story.