響應CSS - 停止圖像重疊時，有一個大屏幕的大小

我創建一個響應html5播放器，目前正在設計的CSS。我遇到的問題是，當在大屏幕上查看時，圖像將與.container重疊，並且在小屏幕上查看時不會填充容器。圖像必須始終在所有屏幕尺寸上顯示相同的尺寸，並且必須始終填充（高度方向）容器。響應CSS - 停止圖像重疊時，有一個大屏幕的大小

這是jsfiddle。我已經把它放在一個div中來模擬不同的屏幕尺寸，只需改變它的寬度就可以看看會發生什麼！

來源

2012-10-30 Jacob Windsor

只需添加一個<div>元素，並將clear到both

例如：http://jsfiddle.net/NPdtT/2/

因爲你是浮動元素，他們沒有得到背景下，這樣的你需要清除（確保所有的上面的元素將進入一個包裝元素 - 在你的例子中包裝是main_container）。

補充說：<div class="clear"></div>和.clear { clear:both; }

來源

2012-10-30 19:12:56 balexandre

是修復它重疊的問題，但它不填充容器時太小 –

的是，使用一個CSS框架來幫助你有一個負責任的設計無論是不是問題[** Twitter Bootstrap **]（http://twitter.github.com/bootstrap/index.html）或[** Zurb Fundation **]（http://foundation.zurb.com/）是最佳選擇。 – balexandre

響應CSS - 停止圖像重疊時，有一個大屏幕的大小

回答

相關問題