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

Category: Website Design

ashoksharma
Asked:
2013-01-13 2:16 pm

Hits: 146
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 .

You must login before you can ask a follow up question.

You must login before you can submit an answer.

OTHER ANSWERS

0

JacobIMH
2013-01-13 3:14 pm
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="/support/./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="/support/./image01.png">

<img src="/support/./image02.png">

<img src="/support/./image03.png">

<img src="/support/./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

You must login before you can post a comment about this answer.
Like this Question?

Support Center Login

Latest Questions

If you need some help, submit your question to our Community!
We guarantee a response within 60 minutes (8am - 9pm EST, Monday - Friday)
Ask a Question!
Recent Questions
  1. blocked from logging into wordpress
  2. Connection Refused
  3. renew
Browse other questions

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!