Html 保持图像纵横比和使用宽度百分比

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

此小提琴包含代码

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

<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>

可访问文本

不幸的是，我也不能让它工作

我的问题是，如何确保它们保持正确的宽度和高度，而不修剪侧面并保持图像居中

例如，我希望看到以下网站并向下滚动一点。（）

---

有没有一种方法可以在css中实现这一点，或者这需要jquery/js？

你是说这样的东西吗

---

如果你正在开发一个响应性强的网站，我建议使用一个框架，比如，它已经解决了很多问题。另外，在他们的网站上，有很多例子可以帮助你了解情况。

我又看了一眼，结果发现我没有使用相同纵横比的图像，这太傻了

---

我现在已经确定我所有的图片都是相同的纵横比，所以现在一切都很好

我已经试过了，但很不幸，它仍然奇怪地缩放图像，所以不是我想要的。你说的“奇怪”到底是什么意思？图像是否需要具有最小高度？那么...怎么样

<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>

<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; }