0

I have essentially:

echo '<img height="70" width="120" src="'.$img.'">';

Most of my images will be these dimensions already, but occasionally some will be other dimensions, like maybe 150x150. In those cases, I just want the browser to jam the bigger image into the smaller space. I don't really care if the image doesn't look perfect.

My problem is that this is not happening. Despite specifying the dimensions, any image that is not already those dimensions is still displaying in its original dimensions, and it's messing up my layout.

How do I make sure the displayed image takes on the dimensions that I specify in the tag even if the source image is not of those dimensions?

Edit: I realize also that resizing the original images might be the "ideal" solution, in my case this is not practical.

2
  • You have not provided enough info, your code clearly is not standard HTML, looks like php to me but thats not tagged in your question. Dec 6, 2011 at 19:04
  • Yes sorry, it is PHP generating the HTML to which my question refers. I included it to show the context (this is not just a couple lines or a couple images that I could change individually, but rather something that is looped over hundreds or thousands of times), but my question is really just about the HTML.
    – Joe M.
    Dec 6, 2011 at 19:08

3 Answers 3

0

That should take care of it, doesn't sound like a css is overriding your specified dimensions. Try style="height: 70px; width: 120px;" instead?

1
  • 1
    some browsers render differently depending on doctypes...width and height are not a reliable way to set dimensions across browsers but I would still include it Dec 6, 2011 at 19:23
0

Try only specifying one dimension for images you want to constrain to a smaller space.

Example:

<img width="50" src="http://www.example.com/myimage.png">
0

There's a few ways to do this.

You could read in the file in PHP and detect what the actual dimensions of the picture are and then fill in the width/height appropriately.

Alternatively, you could use an external script to handle the image. I use a thumb script myself and there's plenty out there. They let you define the file, width and/or height and will return with the picture constrained to those dimensions. The image tag would end up looking something like this:

  <img alt="Pic" src="/path/to/thumb.php?file=images/somepic.png&size=75" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.