Question

我正在尝试找出创建响应式图像以适应div容器的整个背景的最佳方法。还有两个文本框具有rbga值，需要与图像的某个部分完全内联。

我想知道是否更好的做z索引并将图像放在html中或将图像保存在css中作为背景图像？

现在，对于我的其余图片，我使用JavaScript，jQuery和PHP来调整位于html中的图像。我也在使用媒体查询来调整我的页面。我试图不做三张图片;但也许这是我最好的选择？

这是我到目前为止所拥有的。我删除了额外的代码，以免增加混淆。我还附上了我想要完成的jpg。我可以得到段落divs排队;但没有响应地与图像匹配。

<section id="content" role="main" class="cf">
   <div class="mission">
       <h1>We are What We Create</h1> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero odio, 
         gravida sedconsequat a, faucibus dignissim</p>
     </div>

   </section>

CSS
.mission {
  background-image:url(../images/gallery_banner.jpg);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.mission p {
    color: #fff;
    text-align:center;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    width: 100%;
    margin: 0 auto;
    margin-top: 220px;
    margin-bottom:5%;
}

.mission h1 {
    font-weight: bold;
    font-size: 120%;
    color: #fff;
    text-shadow: 2px 1px 1px  #4c4341;
    background: rgba(81,118,131, .9);
    letter-spacing:.1em;
    text-align: center;


}

链接到我想要做的照片图像：
https://docs.google.com/file/d/0B_TAmXXa2n8OUXJ2LVd0SFZwQVk/edit?usp=sharing

Answer 1

如果重新调整大小（这是我解释它的方式），我将采取以下措施来实现图像所表示的一致性。我绝不是专家，我不知道这是不是最好的解决方案。但是这里：以百分比衡量边距和尺寸，因为如果以较小的比例显示它将是一致的。

最左边的方框说'Lorem ipsum dolor'：
11/1280 = 0.085 - ＆gt; 0.8％（保证金左）
295/350 = 0.842 - ＆gt; 84.2％（保证金最高）
494/1280 = 0.385 - ＆gt; 38.5％（宽度）
49/350 = 0.154 - ＆gt; 15.4％（身高）

然后将这些CSS规则附加到位于'header image div'内的文本包装器。

#wrapper { /* Wrapper for Left text */
    position: relative;
    top: 84.2%;
    left: 0.8%;
    width: 38.5%;
    height: 15.4%;    
}

例如，请参阅this jsfiddle。

祝你好运！

Answer 2

我会将图像放入html并使用css设置样式以适合容器。

<div id="container"><img src="http://i35.tinypic.com/69kdw8.jpg" border="0" alt="Image and video hosting by TinyPic"><div id="d1">Test</div><div id="d2">Test test2</div></div>

并设计风格：

#container {
    position:relative;
}
#d1, #d2 {
    position:absolute;
    background-color:green;
    opacity:0.7;
    color:white;
}
#d1 {
    height:16%;
    width:39%;
    bottom:0;
    left:0;
}
#d2 {
    height:68%;
    width:29%;
    top:0;
    left:58%;
}

http://jsfiddle.net/RuwRU/

使用CSS背景图像的响应式图像

2 个答案: