响应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 - 停止图像重叠时，有一个大屏幕的大小

回答

相关问题