Crop image to screen height CSS?

E

Egor Traurov2014-10-29 20:04:57

css

Egor Traurov, 2014-10-29 20:04:57

Hello.
Stuck at the moment.. There is a DIV and there is an image that should not exceed the height of the screen.
It is necessary that the picture be rubber in relation to the height of the monitor and that it does not exceed it. The div must be followed by another div. It all needs to be made rubber somehow. Absolute values are not very suitable, because the picture can change, as well as its dimensions.
Something similar is position: fixed, but I don't want the image to be fixed.
What do you advise? :)

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

S

s104, 2014-10-29
@ProMaks

Use vh unit: jsfiddle.net/o8ajw1k0
caniuse.com/#feat=viewport-units

A

Alexander Taratin, 2014-10-29
@Taraflex

htmlbook.ru/css/background-size
Scales the image proportionally so that its width or height equals the width or height of the box.

A

Arseniy Togulev, 2014-10-29
@tetra

#content {  
    height: 100%;
 
}


#content img{
    max-height:100%;
    
}
<body>

    <div id="content">
        <img src="images/abc.jpg">
    </div>      

</body>