按比例调整窗口上div的宽度和高度

Couple of days I am trying to make a div re-size like an image(proportionally).

几天来，我尝试将div重新设置成图像大小(按比例)。

For example If I have a div with dimensions 500x140, I want it on a browser re-size to react like an image that has width="100%". I find out a similar questions but they didn't work for me.

例如，如果我有一个尺寸为500x140的div，我想让它在浏览器上重新调整大小，使其像一个宽度为“100%”的图片。我发现了一个类似的问题，但它们对我不起作用。

Is there a way to do that(without using a dummy image)?

是否有一种方法可以做到这一点(不使用虚拟图像)?

EDIT: 按比例调整窗口上div的宽度和高度

编辑:

p.s. Sorry for my bad English.

附注:对不起，我的英语不好。

3 个解决方案

#1

I found the answer myself.

我自己找到了答案。

HTM:

HTM:

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

CSS:

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%;
}

The interesting part in the code is the margin-top of the .parent:before selector. By this you can adjust the basic height of the div. Here is the jsfiddle - http://jsfiddle.net/ndzCL/

代码中有趣的部分是.parent:before选择器的边栏。通过这种方式，您可以调整div的基本高度

It is not the perfect solution but it is simple and use only CSS.

它不是完美的解决方案，但它很简单，只使用CSS。

Thanks everyone for the help :)

谢谢大家的帮助

#2

Instead of setting the dimensions as a pixel number, try setting it to a percentage. You may set a min-width and min-height as well

不要将维度设置为像素数，而是将其设置为百分比。你也可以设置最小的宽度和最小的高度

#3

you can use max-height and max-width.

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

DEMO

演示

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

100vh means 100% of view port height and 100vw means 100% of view port width.

100vh表示查看端口高度的100%，100vw表示查看端口宽度的100%。

you can use percentage too. percentage take parent width. for example if you set max-width:50% for an element, it takes 50% of parent's width (same for height).

你也可以用百分数。比例带父宽度。例如，如果您为一个元素设置max-width:50%，那么它将占用父元素宽度的50%(同样的高度)。

update:

更新:

you can use media query too, like this:

你也可以使用媒体查询:

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

this code work when max-width be equal to 500px. here is DEMO

当max-width等于500px时，这个代码就可以工作了。这是演示

#1