Define max size for all images with CSS?

yes.

img {width: 100px; height: 100px;}

You'll need to get more precise with this to target just the images you want re-sized.

#container #gravitar img {width: 100px; height: 100px;}

CupidsToejam, thank you very much for the swift reply.

The thing is that I wouldn't know in advance what the names for the images would be as they would be uploaded by the users of the site. Would it be possible to use any of the above code to automatically resize all images without knowing their precise names?

Thanks again!

My code above is just an example. You will need to specify container names to use specificity to target the img tags you want to resize.

Thanks again for your reply!

I'm sorry but I still don't understand if I could use CSS to automatically resize images without knowing the names for the images in advance. Just to clarify, I'm not looking to resize images that I have to specify individually in the CSS but all images at once with the CSS.

Here is an example:
Lets say a user uploads an image to my site with width: 80px and height: 80px. Then if I have specified in the CSS that the maximum allowed for images is width: 20px and height: 20px, in that case that image should be resized when displayed in a browser from 80x80 to 20x20.
I wouldn't want to after the image have been uploaded go into the CSS and specifically target the name of the uploaded image to have it resized. It should happen automatically per my CSS settings.

Could I do this with CSS?

Please don't hesistate to ask me to clarify my question if I'm being unclear in any way.

Thanks once again, I appreciate it!

I mean in the same way as all images on the site could be removed with inserting in the CSS:
img { display:none ! important }

Is there something similar I could insert to instead of removing the images completely, just resize them to a by me specified size?

Thanks again!

why dont you provide a snippet of code, where the image will appear, and ill give you a better example.

Thanks once again!

When I added the img { display:none ! important } to remove all images, I just added it near the top. Like this (the added code is at the bottom):

body {
margin: 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
 
ul {margin:0; padding:0;}
ol {margin:0; padding:0;}
 
fieldset {border:none;}
legend {margin-top:10px;font-size:12px;font-weight:bold;color:#063E3F;}
label {font-weight:bold;}
 
 
/* added to remove all images */
img { display:none ! important }

But, I believe uploaded images are part of a Storycontent function for the site, so possible it would be here the images sizes should be specified. In that case, the code snippet would be this :

.storycontent {
padding: 0px;
font-size:11px;
}
.storycontent p {
margin:0 0 -1px 0;
}
.storycontent ol {
margin-left:1px;
padding:0;
}
.storycontent ol li {
line-height:14px;
margin:0 0 -1px 0;
padding:0;
}
.storycontent ul {
margin:0 0 0px 0;
padding:0;
}
.storycontent ul li {
line-height:13px;
margin:0 0 -1px 0;
padding:0;
}

Thanks very much for taking your time and helping me, I really appreciate it.

Best regards,
Jonas

I need to see the html snippet where the images will load.

Here is a code snippet with the html (and its where it says <a href="/pligg/modules/upload/attachments/king.jpg">

Here is the code:

<a href="/pligg/story.php?title=imageuploadtest">imageuploadtest</a>
													</h2>
 
	<div class="storycontent">
 
 
 
 
    						<a href="/pligg/modules/upload/attachments/king.jpg">
						<img src="/pligg/modules/upload/attachments/thumbs/king200x200.jpg">
		</a>
 
 
			<span class="news-body-text">
			<span id="ls_contents-0">
									<p>imageuploadtest</p>
 
				<br style="clear: both;"> 
			</span>
		</span>
 
				</div>
 
	<div class="storyfooter">
		<div class="floatleft subtext">
				 <a href="/pligg/story.php?title=imageuploadtest"> Read More</a> |		<span id="ls_comments_url-0">
							<span id="linksummaryDiscuss"><a href="/pligg/story.php?title=imageuploadtest#discuss" class="comments">Discuss</a>&nbsp;</span>
											</span> 
 
 
					|&nbsp;
 
			<span id="xreport-0"><span id="linksummaryBury"><a href="javascript:vote(0,26,0,'d736f6dd6ceb5cb92435b7b29feeb142',-10)">Bury</a></span></span>
 
 
 
 
									|&nbsp;
				<span id="emailto-0" style="display: none;"></span>
 
				</div>
 
		<div class="floatright subtext">
		<a href="/pligg/upcoming.php?category=News">News</a>
					                | 
															<a href="/pligg/search.php?search=imageuploadtest&amp;tag=true">imageuploadtest</a>
 
																				<a href="/pligg/search.php?search=imageuploadtest&amp;tag=true">All</a>
 
 
		 </div>
	</div>
 
 
 
	</div>
	<br>
 
				<span class="subtext">
				Posted by 
 
				<a href="/pligg/user.php?login=ad23g54">ad23g54</a>  2 days ago
 
									(Editorial)
 
 
 
 
				<span id="ls_adminlinks-0" style="display: none;">
 
																				</span>
			</span>

Its from the following url: http://www.nicer.info/pligg/upcoming.php

Thanks once again

so, try this

.storycontent img {width: 20px; height: 20px;}

That was exactly what I was looking for, adding that css code is resizing all the images perfectly! Thank you very much, I'm extremely grateful

Best regards,
Jonas

glad I could help!

Hi Jone77,
Although Cupids code gives you exactly what you asked for, you should be aware that the image file size is not effected. For example if you have a 5MB image that is normally 1024px x 1024px and you use css to resize, it will still be the 5MB image with the same actual dimensions. You should really look at resizing the image before or as it is uploaded with something like GD.

Tony, thank you also very much for your reply.
I'm still happy with that the images could be resized by CSS, but its not optimal that the image file size isn't affected since its for a mobile template where filesize should be kept down for mobile devices. Is it the same for this code img { display:none ! important } that the image sizes is not affected even though they're not displayed?
By GD, do you mean Grids CSS? And could GD be used for a specific CSS and a template? (Since I have another template for the same site but using another CSS that I wouldn't want affected by the same size limits as the mobile template)

Thanks again!

Best regards,
Jonas

GD is a library of scripts that manipulate images, usually used with PHP, another popular one is ImageMagik.
I'm pretty sure display:none; wont load the image, but don't rely on my memory, look it up or test it out.

Ok, thank you once again for your reply.

Best regards, Jonas