How to make the height of css3 stretch in proportion to the background image when the background width is 100%_html/css_WEB-ITnose

Reply to discussion (solution)

background-size:100% auto;


This is the sentence width 100% height equal proportion

background-size setting image. . .
The div height needs to be solved by js. . .

background-size:100% auto; This is of no use. I tried it. The div height needs to be solved by js. How to write this JS

I know this, you need to make a container with a fixed height-to-width ratio.
Here is a little trick, that is, padding-bottom is calculated according to the width ratio of the parent element. , instead of calculating by height, so you can use overflow padding-bottom here
width:100%;
height::0;
padding-bottom:100%//You can set the proportion here
Then add a background image
Please refer to this article http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

http: //zihua.li/2013/12/keep-height-relevant-to-width-using-css/

This article is good. I divided the height of my image by its width and got a percentage of 46%; Then padding-bottom: 46%; perfectly solved this problem