/    Sign up×
Community /Pin to ProfileBookmark

Setting image size for all images

Copy linkTweet thisAlerts:
Feb 11.2006

My website uses horizontal and vertical images and since I went on-line with it, I have always resized my very large images down to 400 pixels wide by 300 pixels high manually before uploading to the server (or 400 high by 300 wide for vertical images). If I am uploading a large number of images this can be a time consuming process so I am wondering if there is any way to code the page so even very large files will reproduce at the smaller size required. Thank you.

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@JUDFeb 12.2006 — This can be done easily in CSS.

Give your horizontal images a class name of horizontal (e.g <img class="horizontal"....) and your vertical images a class name of vertical (e.g <img class="vertical"....)

Now use a stylesheet to set the widths and heights of your images

Ex:

<style type="text/css">

<!--

img.horizontal {width:400px; height:300px}

img.vertical {width:300px; height:400px}

-->

</style>
Copy linkTweet thisAlerts:
@IrvauthorFeb 12.2006 — Thanks. I will try that and as I understand it at the moment, style sheets can be stand alone documents controlling everything on the website or they can be embedded on each page. Is this correct? Thanks again for your help.
Copy linkTweet thisAlerts:
@welshFeb 12.2006 — yes. you can have it in the head, on a .css page or in the image tag so style="width:400px; height:300px;"
×

Success!

Help @Irv spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...