保持圖像寬高比，並使用寬度百分比

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

來源

2015-04-07 Redavac

你的意思是這樣的嗎？

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

來源

2015-04-07 12:23:21

我試過這個，但它仍然很不幸地縮小了圖像，所以不太適合我所尋找的東西。 – Redavac

「怪異」是什麼意思？圖像是否需要有最低高度？那麼http://jsfiddle.net/0nq887jo/1/ –

如果你正在開發一個敏感的網站，我建議使用一個框架像Bootstrap，它已經解決了很多像你這樣的問題。另外，在他們的網站上有很多例子可以幫助你理解。

來源

2015-04-07 12:27:22 Dagriel

我又看了一遍，結果顯示我沒有使用相同長寬比的圖像，很愚蠢。

我現在已經確保我所有的圖像具有相同的長寬比，所以現在一切正常！

來源

2015-04-07 14:44:40 Redavac

保持圖像寬高比，並使用寬度百分比

回答

相關問題