CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsive-design
Coded Container
Coded Container

Reputation: 863

How can I make a div's height and width the same using responsive design?

I am working on a responsive design and am having a difficult time trying to make some div's height and width both the same. At first I made the div's width a percentage and changed its height to auto, however this only caused the div's to not display. In this example I have to have a fixed height in pixels to allow the div's to show. I am not able to acheive this problem with the use of simple images, but instead I must use background images inside of divs that need to be responsive with a equal with and height that are responsive. When I re-size the browser, I need the divs to change size as squares not rectangles. How can I achieve this?

An example of the following on jsFiddle, can be found using the shortened url at, http://bit.ly/ZLiBm2

Upvotes: 0

Views: 981

Answers (1)

derek_duncan
derek_duncan

Reputation: 1377

Try the method in this jsFiddle http://jsfiddle.net/ZYTST/

Use the padding-bottom as the percentage of height you want for your element and then set height as 0 and width as same value of padding-bottom.

Upvotes: 1

Related Questions