我正在创建一个响应式html5播放器，我正在设计css。我遇到的问题是，当在大屏幕上观看时，图像将与.container重叠，而在小屏幕上观看时，图像不会填满容器。图像必须始终在所有屏幕尺寸上显示相同的大小，并且必须始终填充（高度明智）容器。
这是一个jsfiddle。我已将它全部放在div中以模拟具有不同屏幕尺寸，只需改变它的宽度即可看看会发生什么！
答案 0 :(得分：0)
只需添加<div>元素，然后将clear设置为both
示例：http://jsfiddle.net/NPdtT/2/
因为你是浮动元素，所以它们不会得到上下文，因为你需要清除（确保所有上述元素都将输入一个包装元素 - 在你的例子中，包装器是main_container）。
已添加：<div class="clear"></div>和.clear { clear:both; }