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

这个小提琴包含代码http://jsfiddle.net/1nqbu0mw/

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

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

Answer 2

如果你正在开发一个响应式网站，我建议使用像Bootstrap这样的框架，它已经解决了很多像你这样的问题。此外，在他们的网站上有很多例子可以帮助你摆脱困境。

Answer 3

我又看了一眼，结果发现我没有使用相同宽高比的图像，非常愚蠢。

我现在确保所有图像都具有相同的宽高比，所以现在一切正常！

保持图像宽高比并使用宽度百分比

3 个答案: