ansaurus

Question

How do I get an image to stretch out a DIV

Answer 1

A:

You mean like centering the photo?

.photo {
border:1px solid #CCCCCC;
margin-left:auto;
margin-right:auto;
text-align:center; <--- 
}

Luis Melgratti 2009-04-26 03:25:17

Nah - its more about centering in a div ) because that is what I have to work with in Tumblr, and then making sure my caption div does not extend out past the border of the photo. see: http://dl.getdropbox.com/u/973862/test/index.html

2009-04-26 03:28:36

Answer 2

A:

I think the easiest solution would just to be to fix the width of the container. Why is it 520px?

If it has to be 520px, though, then just center the stuff in the container and add auto-margins for the caption:

<style type="text/css">

.container {
    width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.photo {
    border: solid 1px #ccc;
    margin-left: auto;
    margin-right: auto;
}

.caption {
    max-width: 333px;
    margin-left: auto;
    margin-right: auto;
}

</style>

The max-width property, in particular, will prevent the caption from spilling past the edges of the photo.

htw 2009-04-26 03:29:21

Its 520px because that is what is needed to fit in around my Tumblr theme. I mainly use 500px wide images, but every now and again I need to post a smaller width image, say like the sausage dog, I cant really used fixed width divs because I cant accommodate for all images. I would like to have the text contained under the image and not go past the edges of the image.

2009-04-26 03:31:26

Actually - that fixes it !!!!!Damm - I spent hours trying to get this to work. I'll see what happens when I put the code in the actual theme code, but for now - it works !http://dl.getdropbox.com/u/973862/test/index2.html

2009-04-26 03:33:14

Oh - actually, I see why it is working. The max-width attribute. You see, this will stop say a 500px image from having the text extend out to the edges of the bigger image.

2009-04-26 03:34:23

Yeah, that's the best way I can think of. Of course, the max-width is still hard coded, and I'm not sure if there's a way to get around that issue. Still, I hope this helps.

htw 2009-04-26 03:36:35

hmmm - I wonder if I could rewrite the css on the fly with qjuery. Then I could set the max-width attribute based on image width.

2009-04-26 03:52:06

Is max-width supported on IE6? Quirksmode only lists it as "minimal".

cletus 2009-04-26 03:54:09

There's a good chance it isn't. Hmm…

htw 2009-04-26 04:03:47

bugger....how hard can it be !!!

2009-04-26 04:16:14

Well, people shouldn't be using IE anyway. ;) In all seriousness, though, there are workarounds for IE6's lack of a max-width attribute, easily found via Google. They look pretty ugly, though. Oh, and rewriting the CSS on-the-fly via JavaScript might work—interesting idea.

htw 2009-04-26 04:30:01

About to go flying, but i'll post back tonight with my solution !

2009-04-26 04:58:37

Answer 3

A:

If you don't mind using jQuery to resize it, you could try something like this:

    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript">
        $(document).ready(function() {
         $(".container").css("width", $(".photo img").css("width"));
        });
    </script>

That finds the width of the image inside the div (note the space between ".photo" and "img") with class "photo" and applies that width to the div with class "container". Just to be safe, you'll probably want to use IDs if possible, but this will work as long as the class names are unique.

Dave Cowart 2009-04-28 04:37:04

ansaurus

tags:

views:

answers:

How do I get an image to stretch out a DIV

related questions