相关疑难解决方法(0)

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

如何在不设置特定高度(或最小高度)的情况下让div自动调整为我为其设置的背景大小？

我在响应式html布局中有一个现有的图像映射.图像根据浏览器大小进行缩放,但图像坐标显然是固定的像素大小.我有什么选项来调整图像地图坐标的大小？

我试图保持div元素的特定比例(比如1:2),但保持宽度小于200px.

到目前为止我得到了什么:

div {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    max-width: 200px;
}

它不起作用 - 如果我展开窗口,宽度停止扩展200px但高度不断增长!

我试过设置box-sizing: border-box和max-height: 100px,但既不工作.

我该怎么办？

这是一个小提琴:http://jsfiddle.net/WVu3s/

我怎样才能拥有100%高度的div具有特定的宽高比,例如2:3？

例如,如果外部元素的高度为900px,则内部元素的宽度应为600px,但这应该是响应性的.

我不想为此使用任何JavaScript.

使用CSS3灵活的盒子模型会很好.

是否可以给div一个宽度,该宽度是窗口的百分比,高度是它当前宽度的某个百分比？因此div调整大小,但在调整浏览器窗口大小时保持相同的宽高比.

谢谢Ciao

我想实现一个如下所示的布局:

我对css/html唯一解决方案感兴趣,所以不需要javascript.

两个div的宽度都是动态的,所以我不能使用任何静态边距.

div的侧面和顶部之间的间距应该相同.

我尝试margin: auto auto 0 auto在内部div上使用,正如你在这个jsfiddle中看到的那样,但它只适用于左右.

我不知道怎么做，但我已经研究了几个小时，但无法弄清楚。

我试图让 div 具有固定的宽高比1:1，但这个padding-top技巧不起作用。

这是我的代码：

HTML：

<div class="test">
  <div/><div/><div/><div/>
</div>

CSS：

.test {
  width: 50px;
  height: 0px;
  padding-top: 100%;
  background: blue;
}

谁能弄清楚我做错了什么吗？

JSFiddle 链接： http: //jsfiddle.net/ajpgbc0L/

预期结果： http: //jsfiddle.net/ajpgbc0L/2/

编辑：我应该明确表示宽度可以是任何东西