css image resize - absolute dimensions

[richcleverley]

Hi,

I hope someone can help as I am well and truly stuck.

I need to resize images using css but can't get it to work. The images are displayed using an asp tag and I need to resize them down to 97 x 76 pixels. At the moment they are 120 x 90 pixels.

Does anyone know of a way to do this.

Richard

 

[BillyRayPreachersSon]

If you give the image an id (ask in the ASp forum if you do not know how to do this, but here's how to do it using 'real' HTML):

<img id="someId" src="whatever.gif" />

then in your CSS, you can use:

img#someId {
   width: 97px;
   height: 76px;
}

But better still, just deliver the correct widths to the page for the img:

<img id="someId" src="whatever.gif" width="97" height="76" />

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[richcleverley]

Fraid it didn't help,

The script that provides the picture calls it as <%picture%> and as the script which is php (sorry, my mistake it just calls using the tag which I now presume isn't asp at all but a php call) is encoded I can't get to it We may have to resize all the images manually and make sure that all the new ones are the right size. I can't see any other way around it though.

Richard

 

[BillyRayPreachersSon]

Editing the PHP would be one way. I'd suggest asking in the PHP forum for more help with that.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

You shouldn't really rely on HTML to resize your images - browsers do a worse job of it than proper graphics programs do, and it's wasteful of time and bandwidth to send a full-size image down the wire only to be squashed to a smaller size at the other end. That said, there won't be a huge difference in file size between a 120x90 image and a 90x76 one.

If you've got a lot of images to resize, use a tool to do it automatically. There seem to be plenty out there:

http://www.google.com/search?q=batch+image+processors

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[richcleverley]

Would if I could but unforyunately it's one of those scripts where the php is encoded using ioncube so I can't getinto the php itself. Otherwise it would be a breeze!!!

Richard

 

[Vragabond]

What you could do is use a dependancy selector. For instance, you put all your images inside a div that you give an id for instance, <div id="imageholder">, then add slightly modified Dan's code into the stylesheet:

#imageholder img {
   width: 97px;
   height: 76px;
}

 

[Foamcow]

Try wrapping the asp call in a div.

<div class="resizedImage">
<%picture%>
</div>

Then use CSS like so

.resizedImage img {
 width:97px;
 height:79px;
}

Might work.

Better still would be to wither use different images or modify the code to generate thumbnails/resize the images.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

bah, beat me to it

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Vragabond]

Ha ha! (Nelson style)

 

[Foamcow]

I'd use a class rather than an ID though since there is every possiblity (though admittedly it's not stated) that there is more than 1 image on the page that needs this treatment.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[richcleverley]

Yep, Foamcow wins the prize (the right to look smug!!).

Thanks loads, it works a treat!!

Rich

 

[Vragabond]

I thought he has some kind of gallery and will put all, not just one by one, pictures inside that container. But I guess using a class is a safer approach, though ids are higher on the preferential list if that is ever needed. To be entirely correct, one might consider stuffing images in span rather than div, since span, just like img, is an inline element.

 

[BillyRayPreachersSon]

Technically, images are replaced elements, but that's another thread for another day ;o)

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

Actually Vrag's approach makes more sense if it's a gallery type thingy.


What do you mean Dan? "Replaced elements"?

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[BillyRayPreachersSon]

Replaced elements are elements that switch the tag you put on the page for some other entity. Elements such as img, input, textarea, select, and object are all replaced elements, as what you see in the source is not what you see on screen. See here for more information:

http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Hmm - that link was a bad example as it was from a CSS point of view. You'll probably be able to find a better description on Google somewhere, or in the HTML specs.

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[richcleverley]

It's actually just an image for a property rental script. When a list of properties is displayed it displays one image of each property. I have to make the css from a photoshop image keeping as close to possible to the design. That's why I needed the image resizing.

Thanks all that helped, you never know I might be back. Fiorefox and IE are awful for displaying the same!!

Richard

 

[BillyRayPreachersSon]

Fiorefox and IE are awful for displaying the same!!

That ultimately depends on the quality of your code. Good code will invariably display the same in both browsers 99% of the time.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]