CODEWITHSUNDEEP
cssresponsive-design
Wottensprels
Wottensprels

Reputation: 3327

Responsive Webdesign: Dynamic height

I've got the following page as an example for a responsive layout: flexible Grid

Now i want my own project to do the same as the images on this page. As the screensize decreases, the elements should resize, too.

For the width of those elements, everything works just fine. But their height won't change. I wonder how the author of the example page achieved this, as he doesn't even use a single height-attribute on his images.

Here is my code:

http://nopaste.info/d8a051e767.html

Upvotes: 0

Views: 853

Answers (2)

Damien Overeem
Damien Overeem

Reputation: 4529

Its the 

img {
    max-width: 100%;
}

in ex-site-flexible.html line 63.

It makes the image as width as the containing A and images automatically scale correctly..

Other elements however do not, so you can only do this with images.

Upvotes: 0

Marion LP
Marion LP

Reputation: 142

The example page is using images while you're not. Then you can't use it as an example. In your case, if you don't set any height to your divs, they will grow to make their content fit. So, to make them resize together you can either use a table or use a javascript (check matching column for example)

Upvotes: 1

Related Questions