CODEWITHSUNDEEP
javascripthtmlcss
ViniciusPaiva
ViniciusPaiva

Reputation: 151

Increase size of parent div as image gets bigger

My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.

The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!

Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.

So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/

When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.

As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:

javascript:var img = $('img.center'); img.addClass('zoom');

Thanks!

Upvotes: 1

Views: 89

Answers (3)

lindsay
lindsay

Reputation: 972

Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.

Upvotes: 0

NCoder
NCoder

Reputation: 335

Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.

<div style="clear: both;"></div>

So your div opens, the contents inside, then add the code above, then close the div.

Upvotes: 0

Joseph
Joseph

Reputation: 119877

Try doing it the other way. Have the image fit to the div, and resize the div instead.

Add this style to the image (assuming .myimg is the class).

.myimg {
  display: block;
  width: 100%;
}

Upvotes: 1

Related Questions