Can media queries resize based on a div element instead of the screen?

Question

I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is jus

Answer 1

I was also thinking of media queries, but then I found this:

• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• Maintain the aspect ratio of a div with CSS

Just create a wrapper

with a percentage value for padding-bottom, like this:

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}

It will result in a

with height equal to 75% of the width of its container (a 4:3 aspect ratio).

This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.

It's enough for my needs. Which might be enough for your needs too.

0 讨论(0)

查看其它11个回答

发布评论:

提交评论

---

•  加载中...