当窗口大小调整时，按比例调整div的宽度和高度。

Question

最近我在尝试使一个div像图片一样进行比例缩放。

例如，如果我有一个500x140的div，则希望它在浏览器中重新调整大小时按照width="100%"的图片方式进行响应。 我发现了类似的问题，但它们对我没有用。

是否有一种方法可以实现这一点（不使用虚拟图片）？

编辑：

p.s. 对不起我的英语不好。

- NoSense

---

请查看此链接：http://stackoverflow.com/a/14631825/189937 - Tim Hobbs

谢谢，我会看一下的。 - NoSense

我使用这位大神在这里介绍的方法来实现我的粘性页脚。当你有一个容器 div 时，你可以更轻松地操作内部 div，而不像之前那样困难。这是因为你给 div 设置了 position:relative 属性。我认为你可能也想要自己使用 inline-block。http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio - Johnny Harlamert

Answer 1

我自己找到了答案。

HTM：

<div class="parent">
   <div class="child">
        something...
   </div>
</div>

CSS:

.parent {
    position: relative;
    width:1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px;
}
.parent:before {
    margin-top: 25%;
    content: '.';
    font-size: 0;
    display: inline-block;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
    max-height: 100%;
}

代码中有趣的部分是.parent:before选择器的margin-top。通过这个你可以调整div的基本高度。 这里是jsfiddle - http://jsfiddle.net/ndzCL/ 这不是完美的解决方案，但它简单且仅使用CSS。 感谢大家的帮助 :)

- NoSense

Answer 2

不要使用像素数设置尺寸，而是尝试将其设置为百分比。您也可以设置最小宽度和最小高度。

- Johnny Harlamert

---

好的，但如何在重新调整大小时保持比例（基于浏览器的宽度）？ - NoSense

我明白你的意思。也许这个链接会给你一些启示。http://css-tricks.com/centering-percentage-widthheight-elements/ - Johnny Harlamert

Answer 3

你可以使用 max-height 和 max-width。

演示

div{
    max-height:100vh; /* or 100% */
    max-width:100vw;  /* or 100% */
} 

100vh 表示视口高度的 100%，而 100vw 表示视口宽度的 100%。

你也可以使用百分比。百分比是以父元素的宽度为基准的。例如，如果你给一个元素设置了max-width:50%，那它就会占父元素宽度的 50%（高度同理）。

更新：

你也可以使用媒体查询，像这样：

@media all and (max-width: 500px) {
  div {
    /* some style */
  }
}

当max-width等于500px时，此代码起作用。 这里是演示

- Mohsen Safari

---

这不起作用；啊，人们...为什么你们不明白我想要div按比例调整大小...也许我需要在问题中添加一个示例图像... - NoSense

我不想使用媒体查询，因为调整大小不会是流畅的...我将更新我的问题。 - NoSense