Question

几天我试图将div重新调整为像图像（按比例）。

例如，如果我有一个尺寸为500x140的div，我希望它在浏览器重新调整大小时作出反应，就像一个宽度为“100％”的图像。我发现了类似的问题，但它们对我不起作用。

有没有办法（不使用虚拟图像）？

修改 enter image description here

P.S。抱歉我的英语不好。

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。

感谢大家的帮助：）

Answer 2

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

Answer 3

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

DEMO

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时，此代码有效。 here is DEMO

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

3 个答案: