- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I’ve got an original image that’s 200px by 200px. I’d like to show it at 100px by 100px on a webpage without scaling it down or cropping the original file in any way.
I’ve seen it done before, somewhere. How could I go about doing this?
I believe you can use TimThumb or another script to do something like this.
If the image is in the html you can also just give it a width and height.
<img src="images/yourimage.jpg" alt="whatever" width="100" height="100" />
Thanks guys but I’m sorry, I don’t think I explained myself properly. I want to take this image (300 x 224):
[attachment=1]original.jpg[/attachment]
And crop it in the code (not within an image editing program) to (300 x 150):
[attachment=0]cropped.jpg[/attachment]
The thing is the cropped image is used as a thumbnail on the front page, when clicked it brings you to another page with the original image. I don’t want to have two images in different sizes, it’ll make the work twice as long.
Any help appreciated!
This seems to work pretty well:
<div style="width:300px; height:150px; overflow:hidden;">
<img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />
</div>
(of course you can externalize the CSS if you want)
Basically put the image inside a div, give the div a set height (150) and set the overflow to hidden. Then you adjust the positioning of the image to set it where you want within the div.
<div style="width:300px; height:150px; overflow:hidden;">
<img style="position:relative; top:-25px;"src="original.jpg" width="300" height="224" />
</div>
You’re a life saver, really appreciate it. This should serve me well in future projects. Thanks!
What’s the best method when the images are of varying sizes?