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

问题描述：

用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）的图像一起挤压。当我给它的高度：汽车;无论何时我调整屏幕大小或放大/缩小图像都会变小。我也试过使用下面的代码;

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

答

你的意思是这样的吗？

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

我试过这个，但它仍然很不幸地缩小了图像，所以不太适合我所寻找的东西。 – Redavac

“怪异”是什么意思？图像是否需要有最低高度？那么http://jsfiddle.net/0nq887jo/1/ –

答

如果你正在开发一个敏感的网站，我建议使用一个框架像Bootstrap，它已经解决了很多像你这样的问题。另外，在他们的网站上有很多例子可以帮助你理解。

答

我又看了一遍，结果显示我没有使用相同长宽比的图像，很愚蠢。

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

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

相关推荐