the3rdhero;10975963 wrote:
I don't want to resize the image as such because it'll spoil the image quality
No it won't. If an image is 1000x1000 and you are going to display it as 200x200, actually resizing the image to 200x200 on the server before displaying it will not spoil image quality (compared to displaying the 1000x1000 as 200x200). That does of course assume that you do not change image format or compression levels.
the3rdhero;10975963 wrote:
plus some images could be very long height wise but narrow width wise. How does one keep a good image ratio without spoiling the websites design?
There's nothing preventing you from putting a cap on image width, for eample 400px. As such, an image that is 444x100 would get rezied to 400x90, while an image that is 200x20000 would not get resized.
the3rdhero;10975963 wrote:
i was wondering how do i keep an image within a table or at least keep the width within a table?
As always, there are several ways to achieve this. There's no getting around the first part
decide on max width (and possibly max height)
The good way of doing the second part in my opinion is
Scale down any images that are larger to fit this. Do note that there is nothing preventing you from keeping the original, if you want to allow users to somehow see the full image version, download by link, popup window...
And the reason this is the good way is that you should not be sending more data than the user gets to see.
Another way of achieving the same results for an end user with a good browser is by specifying width (and optionally height) for the image element, IF the image is larger than these values. For example let's say you decided on max 400x2000 px and you have a 450x450 image. Then your image element could be
<img src="" width="400" />
and the browser would do the image scaling that you were too lazy to do server side, with the three downsides
A. You are sending a larger image than what is displayed, which means using up bandwith for no purpose at all
B. People with crap browsers will have really really crappy image quality (you'd get better image quality even if you scaled down the image yourself and saved it with a jpg quality of 40) - It will look like HELL. Granted, most browsers in use today have no problem with this, but if you target average users, this will affect 5-15% of them (IE6 can't handle this).
C. You gain no image quality even in browsers that are capable of adequately scaling an image over doing the job yourself, since the process is exactly the same.
and all you gain is saving yourself a little bit of coding time.
But, there are other ways of doing this as well. Since the overflow property applies to block and replaced elements, you could leave the full sized image there as is, and if it's bigger than some value then scrollbars appear. But do note that even though img is a replaced element, overflow will not work for it (in at least some browsers, since they apply scaling first no matter what the overflow property is). So wrap your images in a block level element, for example div
div.td_img_scroller
{
overflow-x: scroll;
max-width: 400px;
/* and optionally to also put a cap on height */
overflow-y: scroll; /* with the above, can combine rules to "overflow: scroll" */
max-height: 2000px;
}
</style>
</head/>
<body>
<table>
<tbody><tr>
<td>
<div class="td_img_scroller">
<img src="" />
</div>
But this approach will not work in IE6, since it doesn't support max-width and max-height. But there should be workarounds. Just google your way to them if you care about this browser.
