How to style image in variable?

Question

I have an image being pulled out of a forum (avatars), but every time i grab them, they are not fitting my div, no matter what i do, i'm wondering how can i fit that image inside my div?

Here's the line i'm talking about:

<div id="image">'.$ipbwi->member->photo($friend['friends_friend_id']).'</div>

And here's a whole foreach:

<?php
$friends = $ipbwi->member->friendsList(false,true);
foreach($friends as $friend){
echo '
<div class="friend">
<div id="image">'.$ipbwi->member->photo($friend['friends_friend_id']).'</div>
<div class="username">'.$ipbwi->member->id2displayname($friend['friends_friend_id']).'</div>
</div>
';
}
?>

I'm using ipbwi to pull data from ipb forum and i would like to scale all the images to (example) 40x40px.

Edit:

here's the css i'm using for img on div: #friend #image img{width: 40px; height: 40px;}

Thanks in advance!

*The PHP (and the variable) is irrelevant.* Look at the HTML output. Is it valid/expected? And, if so, how can *the HTML* be styled with CSS? There should likely be an `` tag since a profile picture is *data* and thus not suitable for CSS. The data is supplied to `` via the `src` attribute - either to a resource or with a Data URI. — user2246674, May 13 '13 at 21:30
I agree with @user2246674. If you show us the output html and CSS that you are using, we could perhaps be of some assistance. — Martin Turjak, May 13 '13 at 21:32
Have a look at this: http://stackoverflow.com/questions/16352774/is-it-possible-to-render-an-image-in-two-sizes-with-correct-proportion/16352853#16352853 — Arbel, May 13 '13 at 21:41

score 1 · Accepted Answer · answered May 13 '13 at 21:33

1

try adding the style rule

.friend img { max-width:100px; max-height:100px }

answered May 13 '13 at 21:33

Orangepill

24,500
3
42
63

score 0 · Answer 2 · answered May 13 '13 at 21:33

I have done this in the past.

.img-resize {
  width: 200px;
  height : auto;
}

.img-resize {
  width: auto;
  height : 300px;
}

Create a css class img-resize and give it the width and height you desire. This will keep the aspect ration. Use like: <img src="http://example.com/12.jpg" class="img-resize" /> Then you can just replace the scr with value from the db.

Dryden Long · Answer 3 · 2013-05-13T21:40:20.647

0

Use this CSS to resize your images:

img {
  max-width: 40px;
  max-height: 40px;
}

Also, keep in mind that this will aplly to every img tag on your page, so to be more specific you could do something like:

.friend img {
  max-width: 40px;
  max-height: 40px;
}

This will only re-size images that are inside of a div tag with the class "friend"

edited May 13 '13 at 21:40

answered May 13 '13 at 21:33

Dryden Long

10,072
2
35
47

How to style image in variable?

3 Answers3