简体   繁体   中英

Resize div with aspect ratio to fit content css image

Hello I have a div and as background I have an image with width 1920px and height 1200px. divs have 100% width and window.innerHeight on document ready;

The background css images have the follwoing rule: background-size: 100% auto !important; so that they are responsive

What I would like to do is based on window.resize calculate the new height for the div element and set it so that it matches the background-images css height.

newHeight = (1200 * divWidth) / 1920

If I understand you right you don't need js

background: url(../img/image.png) no-repeat center top fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM