Question

所以我试图在公共div（框架）中缩放背景图像以使用浏览器调整大小。不确定是否唯一的方法是使用Javascript我已经环顾四周但似乎没有任何问题。我将不胜感激任何帮助。

链接到我尝试修复的实时网站页面http://ryankelly.info/work.html

HTML

 <div id="workcontent">
    <div class="work">

        <div class="subnav"></div>

        <a href="ggwp.html">
        <div class="framework" style="height: 1085px; transform: translateZ(0px)        translateX(0px) translateY(0px);">
        <div class="ggwp-img"></div>
        <div class="workblock"></div>
        <div class="workblock-text"><h1>GGWP</h1></div>

        <div class="workblocktwo"></div>

        </div>
        </a>

CSS

 .work {
     background: #141414 none repeat scroll 0 0;
     margin: 0px;
     height: 100%;
     text-align:left;
     white-space: nowrap;
     overflow:auto;
     overflow-y:hidden;
     border: 1px  solid;
     background: #141414 none repeat scroll 0 0;
  }
  .framework {
     height: 20px;
     width: 400px;
     border: 1px red solid;
     display: inline-block; 
  }
   .ggwp-img {
     background-color: rgb(34, 34, 34); 
     background-image: url('images/ggwp.jpg'); 
     background-size: cover; opacity:0.25;
     position: relative;
  }

Answer 1

这是一种使用css快速简单的方法。

.ggwp-img {
    background-color: rgb(34, 34, 34); 
    background-image: url('images/ggwp.jpg'); 
    background-size: cover; opacity:0.25;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

参考：http://css-tricks.com/how-to-resizeable-background-image/

div里面有一个背景图片 - 缩放到浏览器

1 个答案: