您的位置：首页 > 其它

背景图片宽度100%高度同比例放大不变形

2017-01-12 12:11 225 查看
解决方案：

1、js  通过计算屏幕宽度 根据图片的宽高度比例来计算高度 来调整div等标签的尺寸

2、使用rem作为单位，提前根据款高比在css写死宽高度

3、使用css样式，代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style type="text/css">

          .Header

          {

            position:relative;
       width: 100%;
       height:0;
       padding-bottom:98.125%;
       background: url('http://img.kuaiwanwo.com/Recom/Header.png') no-repeat;
       background-size: 100% 100%;

          }

          .Header-container

          {

             position:absolute;

             width:100%;

             height:100%;

             top:0;

             left:0; 

          }

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div class="Header">

        <div class="Header-container">

        这里是内容

        </div>

    </div>

    </form>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航