CSS和動態寬度（100％）與幻燈片

然而這種解決方案需要的圖像是固定的尺寸。一旦我添加動態寬度（寬度= 100％），圖像覆蓋文字。

.fadein { 
    position:relative; 
    width:100%; 
}

任何建議如何具有寬度= 100％，並在同一時間，從而避免覆蓋文本的圖像？

2013-10-22 Publicus

只有你需要在你的.fadein類中加入高度，並且可以正常工作。高度應該是大圖像的高度。 –

您可以設置文本定位：

p { 
    position: absolute; 
}

此外，文本應始終包含在某個標籤（P，跨度等。）

2013-10-22 12:23:45

「下面的一些文字**幻燈片圖片」不是說？ –

你有給容器div一個固定的高度和寬度。除非這樣做，否則圖像將如何100％？我的意思是100％是什麼？圖像的父母是div，因此div的100％。

看到這個更新小提琴：http://jsfiddle.net/2kkHH/350/

如果你讓你的div 100％，那麼什麼100％？在這種情況下，它將佔用您網頁的100％。

2013-10-22 12:27:13 Abhitalks

設置.fadein img的位置也是相對的。

.fadein img { 
    position:relative; 
    left:0; 
    top:0; 
}

2013-10-22 12:28:07 Igle

您可以插入的這兩行代碼

$('.fadein img:gt(0)').hide(); 
var h = $('.fadein :first-child').height(); // line to add 1 
$('.fadein').height(h); // line to add 2

，一切都將開始工作 - http://jsfiddle.net/5Ugkr/

的原因是，集裝箱div不從它的絕對推斷其高度定位img兒童，所以你必須手動設置高度。

2013-10-22 12:51:48

回答