Click here to Skip to main content
14,447,082 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hello,
Well here is my problem.
I have a group of images

<div id="slider">
    <img src="images/ScalesEmulator.png"/>
    <img src="images/discussing.jpg" />
    <img src="images/four-main-steps-for-a-software-process-cycle.jpg"/>
    <img src="images/globe.jpg"/>
    <img src="images/shake-hands.jpg" />
</div>


styled with:

#slider {
	float: left;
	height:320px;
	width:650px;
}

#slider img {
	width:650px;
	height:320px;	
}


There is some JavaScript code which will make them keep changing between themselves. The problem is that images might be either smaller or bigger than the size I set on css and for some reason they won't fill the space it was set to them.
So far I couldn't find a way to do this. If I am required to change every picture I have to place on the site, I will do it. But I would like the opinion of people that have more experience with website about my options.

Thanks
Posted
Rate this:
Please Sign up or sign in to vote.

Solution 2

Please see my comments to the Solution 1.

You should always specify either width or height, or none of them. If you specify both, you risk showing some of the images in wrong aspect ratio. Please see:
http://en.wikipedia.org/wiki/Aspect_ratio[^].

Re-sampling down may mean waste of traffic resources. And re-sampling up usually gives unacceptable quality. That said, even if you use CSS or <code><img></img> tag attributes to modify the sizes of images, you should better have source images on the server side preliminary re-sampled closer to the required sized. It's not a problem to keep source image files in two versions: full-size and the version for thumbnails.

—SA
   
Comments
Paulo Augusto Kunzel 16-Oct-13 20:32pm
   
I imagined it would be something like that but hoped for otherwise.
Thanks
Sergey Alexandrovich Kryukov 16-Oct-13 21:21pm
   
Good. There is nothing too bad with such solution. Besides, did you consider re-sampling images on the fly on the server side? You need to consider all the scenarios, in terms of overall performance. If this is nothing more than thumbnails + full-size images, statically storing them on server side would be the best option.

Good luck, call again.
—SA
Rate this:
Please Sign up or sign in to vote.

Solution 1

try this

in your .css

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


of cause set your own sizes.
   
v2
Comments
Paulo Augusto Kunzel 16-Oct-13 19:51pm
   
Hi Nico,

As you can see from my example, I already have that set. Also, I've tried min-height, min-width before that...
Sergey Alexandrovich Kryukov 16-Oct-13 20:24pm
   
This, generally speaking, will distort the aspect ratio of images. In practice, both width and height should never be specified, only one or another, or none.
Also you could warn OP about the danger of re-sampling to a larger size, it may give unacceptable quality. And re-sampling down would increase traffic without a good reason...
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100