响应css-当屏幕较大时停止图像重叠

我正在创建一个反应灵敏的html5播放器，目前正在设计css。我遇到的问题是，当在大屏幕上查看时，图像将与

.container

重叠，而在小屏幕上查看时，图像不会填充容器。图像在所有屏幕尺寸上必须始终显示相同的大小，并且必须始终填充（高度方向）容器

这是一个例子。我把它全部放在一个div中，模拟不同的屏幕大小，只需改变它的宽度，看看会发生什么

只需添加一个

元素并将

清除
设置为
两个

例如：

因为您是浮动元素，所以它们不获取上下文，因此需要清除（确保上述所有元素都将输入到包装器元素中-在您的示例中，包装器是
main\u container
）

添加：
和
.clear{clear:两者；}​
是的，修复了重叠问题，但没有解决容器太小而无法填充容器的问题。使用CSS框架帮助您实现响应性设计，或者是最佳选择。