Question

我正试图让页面设计中的图像突破以填充整个浏览器的宽度和比例，并在http://na.sage.com/ca/sage-payment-solutions等CMS系统中调整大小。他们还在图像上有文字内容。那会很棒，但没有必要像http://www.unitecms.net/joomla-extensions/unite-revolution-slider-responsive/revolution-full-width-demo这样的滑块可以用于幻灯片放映，但我还没有看到任何东西只能推出单个图像。
CMS输出的页面可能如下：

<body>
 <div>
  <div style="width: 800px;margin: 0 auto;">
   <div>
    <div>
     Text above image
<img alt="this should span the whole browser width" src="very wide image.jpg">
     Text below image
    </div>
   </div>
  </div>
  </div>
</body>

...或多或少。

Answer 1

您可以使用background：url（）在div上轻松实现此目的。请参阅此示例：

http://jsfiddle.net/TFU9S/4/embedded/result/

代码：

http://jsfiddle.net/TFU9S/

.image{
    background: url('http://37.media.tumblr.com/e615708905cc9df81f901c06ae4afe1e/tumblr_n21ltnVLtz1st5lhmo1_1280.jpg');
    height:300px;
    position:relative;
}

div会将BLOCK作为默认视图，因此它将在整个页面中进行拉伸。

现在，如何在图像上添加文字？你可以把它放在div中，但为了更好的控制，我会给它绝对定位。这是小提琴：

http://jsfiddle.net/TFU9S/1/

.image h2{
    position:absolute;
    top: 125px;
    right:50px;
}

此外，如果你想避免你的图像在太小的情况下重复，你可以这样做：

background-repeat:no-repeat;
background-size:cover;

小提琴：http://jsfiddle.net/TFU9S/2/

此外，如果您想要更好地控制图像中的内容。你可以添加一个额外的div并给它一些样式。这是：

http://jsfiddle.net/TFU9S/3/

编辑：

要使其全屏显示没有空格，请确保对主体进行“软重置”。（保证金和填充：0）

最后的小提琴：

http://jsfiddle.net/TFU9S/4/

http://jsfiddle.net/TFU9S/4/embedded/result/

Answer 2

没有定位，首先在图像上设置一个浮点数，使其从文档流中取出，这样可以将图像宽度设置为不受父宽度的影响，然后将图像宽度设置为100vw，这意味着100％视口宽度。

将此CSS应用于您发布的HTML：

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
img {
    width:100vw;
    height:200px;
    float:left;
}

这是 FIDDLE

Answer 3

通过这里的一些想法和更多的研究，我现在有一个概念证明 http://jsfiddle.net/X3FxE/4/

HTML：

<div id='container'>
    Text above div
    <div id="imgcontainer">
        Text within div - 
        <img  id="imgwide" src="http://www.3dwallhd.com/wp-content/uploads/2013/04/248721xcitefun-wide-wallpaper004.jpg" />
        just runs through
    </div>
    Text below div
</div>

CSS：

#container {
    width: 200px;
    margin-left: 50px;
}
img {
    position:absolute;
    left: 0;
    width: 100%;
    height: auto;
    z-index:-1;
}

使用Javascript：

function setHeight() {
  var args = setHeight.arguments;
  document.getElementById(args[0]).style.height = document.getElementById(args[1]).clientHeight+'px';
}
function resiz() {setHeight('imgcontainer', 'imgwide');}
resiz();

var addEvent = function(elem, type, eventHandle) {
    if (elem == null || typeof(elem) == 'undefined') return;
    if ( elem.addEventListener ) {
        elem.addEventListener( type, eventHandle, false );
    } else if ( elem.attachEvent ) {
        elem.attachEvent( "on" + type, eventHandle );
    } else {
        elem["on"+type]=eventHandle;
    }
};
addEvent(window, "resize", resiz);

我仍然需要弄清楚如何将它集成到Joomla和WordPress的CMS文章中，但现在这个概念已经准备就绪。

具有较小父级的全宽图像

3 个答案: