search

Home  >  Q&A  >  body text

css3 - css背景图片高度百分百，宽度保持比例怎么做？

css中有宽度百分百，若想达到高度占屏幕的百分百，宽度保持纵横比应该怎么做呢， 希望详细解答，嘻嘻

巴扎黑巴扎黑2782 days ago1406

reply all(3)I'll reply

  • 迷茫

    迷茫2017-04-17 11:22:12

    If you are referring to the background image... background-size: auto 100%; It will have the effect you want.

    It is recommended to read MDN’s explanation of background-size

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 11:22:12

    Although I would like to be able to answer in detail, I am helpless. I don’t know what you want or need.

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:22:12

    background: url(../images/main1_bg.jpg) no-repeat center center;
    background-size:cover;
    background-attachment: fixed;
    I wrote it before, here background-size: 100% 100%; probably OK, but the proportion will be distorted.
    The method I use now is to set img to absolute, top:0;left:50%; height:100%; and then write <img ... onload="setPos(this)"> on the label ;
    Then this setpos function is written in the js file, function setpos(ts){ var w=ts.width/2; ts.style.margin="0 0 0 -"+w+"px"; } This function It will be executed after the image is loaded to center the image horizontally.

    reply
    0
  • Cancelreply