how to maintain the relative sizes of images in a multiple -images page ---say of bags or watches -on an e-commerce site ,so as to visually know which item is

ashoksharma

11 years ago
Answered

By relative size I meant the difference in sizes of various items ,say of bags ,on a particular page ---the bigger bags should look bigger than the smaller ones .
Further ,the relative sizes in visual can either be accomplished at the time of shooting ,or through photoshop ,or through the website tools --eg CSS or various other specific tools .
My point is if you want to set the relative sizes either in photoshop or through website tools ,how it is possible to know the size just by looking at the images alone .

Replies 1

Newest first
Newest first Oldest first

JacobIMH

11 years ago

Hello ashoksharma, and thank you for your question. Unfortunately it looks like you attempted to type your entire question in the subject instead of in the body of your message. So you got cut off before completing the full question. In order to do anything with the sizing of images on a page you have two options.

Make your images the desired size before uploading to the server.
Resize your images via HTML style or a CSS style.

The first one should be pretty self explanatory, for the second it depends on what exactly you mean by "relative sizes". For instance if you have a very wide image that is say 500px wide, and 100px high, keeping relative dimensions so that the image stays wide but is just smaller would be accomplished by using the following HTML code: <img src="./image.jpg" style="width: 100px;"> Since you shrunk the width of the image down 5 times, but didn't specify a height, your web-browser automatically comes up with the relative height for the image (in this case 20px). If you set all of your images with a set width they will all have varying sizes depending on their original size, but will be sized proportionally relative to the individual source image. If your source images have varying aspect ratios and you're not interested in maintaining those, but simply making every image on one page maintain the exact same size. Then I'd recommend using the following bit of CSS style:

<html>
<head>
<title>Image page</title>

<style>
img { height: 200px; width: 250px; }
</style>

</head>

<body>

<img src="./image01.png">
<img src="./image02.png">
<img src="./image03.png">
<img src="./image04.png">


</body>
</html>

If you can be a bit more specific as to exactly what you're trying to do if one of those options doesn't work for you, we'd be glad to help! - Jacob

Reply Link