相关疑难解决方法(0)

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

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

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

我希望我的图像在窗口高度变化时调整大小,同时保持包含div收缩包装图像.我试过用:

<div>
    <img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>

html, body {
    height: 100%;
    width: 100%;
}

div {
    height: 90%;
    background-color: black;
    display: inline-block;
}

img {
    height: 100%;
    width: auto;
}

但它似乎没有按预期工作.在div不缩水.一旦我在调试器中使用css属性,它实际上就会这样做.

这是小提琴(尝试调整结果面板的大小)

更新:

现在这很奇怪.自从我第一次发布此问题以来,浏 最初(Chrome),当我调整窗口大小时,图像将按预期成比例缩小,但包装div将保持其原始宽度.现在发生了什么(Chrome更新？)是图像不会水平缩小,而div也是.

我尝试使用最新的Safari和Firefox.两者缩小图像但保持原始div宽度.所以请善待在其他浏览器上查看您的解决方案.

更新#2:

div必须保持块类型,因为我需要在图像的角落放置其他元素.