CODEWITHSUNDEEP
htmlcss
Marvin3
Marvin3

Reputation: 6041

Resize text based on image size

I have an image and a block of text below of it. I'm trying to make max-width of text width of image. (size of image is not defined and size of parent div is not defined too)

<div>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/NYers_celebrate_historic_vote_for_gay_marriage.webm/300px--NYers_celebrate_historic_vote_for_gay_marriage.webm.jpg"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non risus dolor, a euismod leo. Phasellus viverra aliquet felis eget porttitor. Aenean sollicitudin, nulla id ultrices ullamcorper, sem lectus sagittis metus, ut sodales dui nunc id sem. Vestibulum nisl justo, aliquet id luctus eu, tincidunt sit amet diam. Suspendisse at nulla nisl. Duis sed sapien odio, eget commodo metus. Fusce ultricies lectus sit amet massa tristique eu ultricies elit accumsan. Donec mi mi, elementum sit amet faucibus sed, pellentesque sed neque. Pellentesque ut tincidunt dui. Nullam in urna vitae arcu lobortis porta sit amet a sapien. Maecenas at ultricies erat. Maecenas diam arcu, condimentum eu gravida quis, aliquam at nunc. Duis at fermentum orci. Donec porta feugiat purus faucibus euismod. In pretium auctor nulla, blandit dapibus ante auctor at.</p>
</div>

I draw a quick mockup for better understanding - enter image description here

Codepen - http://codepen.io/anon/pen/kJLrF

Is there any way to implement this? (such markup is not required, more elements can be added if required)

Thank you for help!

Upvotes: 1

Views: 499

Answers (5)

Barnee
Barnee

Reputation: 3389

I've played around a bit and I managed to do it with html and css: html:

<div class="container">
   <img src="http://dummyimage.com/300x200/000/fff&text=image" />
   <p>Lorem ipsum [...]</p>
</div>

css:

.container {
   margin: 0 auto;
   width: -moz-min-content;
   width: -webkit-min-content;
}

FIDDLE

The problem is that it works only in firefox and chrome.

Upvotes: 1

Christian
Christian

Reputation: 7429

Mhhhhm, I have no idea if it's possible to do this via css. If you want to get this done without javascript, the only thing which I know is something like this: http://goo.gl/U3pBE

Upvotes: 0

dinodsaurus
dinodsaurus

Reputation: 5095

You can accomplish this using this little script:

$('p').css('width',$('img').width() + 'px');

It is taking the width of the img and it is applying it to the width of p. Here is jsFiddle

Upvotes: 0

strah
strah

Reputation: 6722

if you insist on the structure you've built than JS is the only option.

$(init);

function init()
{
  var w = $("img").innerWidth();
  $('p').css({"width": w});
}

http://jsbin.com/ikunix/1/

Wrapping image and paragraph text in another container would be better though.

Upvotes: 1

BenM
BenM

Reputation: 53198

You will need to wrap them in another div element, set its max-width property, and then define a 100% width for the image as follows:

div {
    max-width: 500px;
}

div img {
    width: 100%;
}

Please see this jsFiddle demo > http://jsfiddle.net/Vt9CL/

Upvotes: 1

Related Questions