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

*{ margin:0; padding:0;} .kech{ background-image: url(tu.jpg) ;background-size:100% auto;background-repeat: no-repeat; width:100%;} .kech:before{content: ""; display: block; padding-top: 100%;} .kech1 img{ width:100%;}

I'm looking for it online Yes, use: before, padding-top:100%; but it’s wrong. I want the effect in kech to be the same as in kech1. When the width is set to 100%, the background will be stretched proportionally, just like setting the image width to 100%. Highly adaptive with the same effect

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn