html - 保持图像纵横比并使用宽度百分比

Question

使用 css 我给了 2 个 div 一个背景图像(这两个 div 都是 50% 宽度)，并将这些 div 放在一个容器中(100% 宽度)

//css
.banner_container { width: 100%; height: 150px; overflow: hidden; }
.banner_small { background-image: url('http://placehold.it/350x150'); width: 50%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; float: left; }

这个 fiddle 包含代码 http://jsfiddle.net/1nqbu0mw/

我的问题是，当我给它们一个固定的高度(例如 200 像素)时，图像会被挤压在一起。当我给它高度时:自动；每当我调整屏幕大小时或放大/缩小时，图像都会变小。我也尝试过使用以下代码；

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

不幸的是，我也无法让它工作。

我的问题是，我如何才能确保它们保持正确的宽度和高度，同时不修剪边并使图像居中？

有关我想要的示例，请查看以下网站并向下滚动一点。 (http://weareadaptable.com/)

有没有办法只在 css 中做到这一点，还是需要 jquery/js？

Answer 1

你的意思是这样的吗？

http://jsfiddle.net/1nqbu0mw/

<div class="banner_container">
<div class="banner_small"></div>
<div class="banner_small"></div>

body { padding: 0; margin: 0; }

.banner_container { width: 100%; height: 150px; overflow: hidden; }
.banner_small { background-image: url('http://placehold.it/350x150'); width: 50%; height: 100%; background-position: top center; background-repeat: no-repeat; background-size: 100% auto; float: left; }