[英]Full Width Image With Smaller Parent
我正在嘗試從頁面設計中獲取圖像，以填充整個瀏覽器寬度並在 CMS 系統（如http://na.sage.com/ca/sage-payment-solutions上）中調整大小。 它們在圖像上也有文字內容。 那會很棒，但不是必需的。
有像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>
...或多或少。
您可以使用 background: url() 在您的 div 上輕松實現這一點。 例如，請參閱此內容：
http://jsfiddle.net/TFU9S/4/embedded/result/
代碼在：
.image{
background: url('http://37.media.tumblr.com/e615708905cc9df81f901c06ae4afe1e/tumblr_n21ltnVLtz1st5lhmo1_1280.jpg');
height:300px;
position:relative;
}
發生的情況是 div 將 BLOCK 作為默認視圖，因此它將在整個頁面中拉伸。
現在，如何在圖像上添加文本？ 你可以把它放在 div 里面，但為了更好的控制，我會給它絕對定位。 這是小提琴：
.image h2{
position:absolute;
top: 125px;
right:50px;
}
此外，如果您想避免圖像太小時重復，您可以執行以下操作：
background-repeat:no-repeat;
background-size:cover;
小提琴： http : //jsfiddle.net/TFU9S/2/
此外，如果您想更好地控制圖像內的內容。 你可以添加一個額外的 div 並給它一些樣式。 這里是：
編輯：
要使其全屏且沒有空白，請確保對主體進行“軟重置”。 （邊距和填充：0）
最后的小提琴：
在沒有定位的情況下，首先在圖像上設置一個浮動以將其從文檔流中取出，這將設置圖像寬度不受父寬度的影響，然后將圖像寬度設置為 100vw，這意味着 100% 視口寬度。
將此 CSS 應用於您發布的 HTML：
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
img {
width:100vw;
height:200px;
float:left;
}
這是一把小提琴
有了這里的一些想法和更多的研究，我現在在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 文章中，但這個概念現在已經准備好了。
當相對父元素的寬度較小時，將絕對元素全寬設置為 100%
[英]set absolute element full width 100% when relative parent has a smaller width
CSS：將子div寬度自動設置為內容，而不是完整的父寬度
[英]CSS: Make child div width auto to content in it, not the full parent width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.