Geek Answers Handbook

Proportionally change the size and height of the div to the window size

For several days I try to make a div the size of an image (proportionally).

For example, if I have a div with dimensions of 500x140, I want it to resize the browser as an image with a width = "100%". I find out similar questions, but they did not work for me.

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

EDIT: enter image description here

ps Sorry for my bad english.

+4
source share
3 answers

I myself found the answer.

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

margin-top.parent: . div. jsfiddle - http://jsfiddle.net/ndzCL/

, CSS.

:)

+5

, , . .

+1

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 */
  }
}

this code works when max-widthit is equal 500px. here demo

0
source

More articles:


All Articles