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

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.

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

EDIT:

p.s. Sorry for my bad English.

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

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.

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

EDIT:

p.s. Sorry for my bad English.

• javascript
• jquery
• css
• html

• 1 See this: stackoverflow./a/14631825/189937 – Tim Hobbs Commented Dec 7, 2013 at 8:07
• 1 I use an approach like this guy does here for my sticky footers. When you have a container div you are able to manipulate inner divs much easier than you could before hand. This is bc you give the div a position:relative. I think you may want to use the inline-block yourself. ansciath.tumblr./post/7347495869/css-aspect-ratio – Johnny Harlamert Commented Dec 7, 2013 at 8:45

3 Answers 3

I found the answer myself.

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

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/ndzCL/

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

Thanks everyone for the help :)

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

you can use max-height and 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.

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).

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