響應divs保持相等的寬度x高度比例？

我正在開發CMS，我的客戶需要縮略圖格式的帖子響應網格。我的問題是，我無法控制他們將使用的所有圖像，並且正在尋找一種方法來設置與所使用圖像的原始寬度成比例的高度。響應divs保持相等的寬度x高度比例？

這將使更多的意義與此的jsfiddle：http://jsfiddle.net/pjwoma2/U2ZkU/

正如你所看到的，圖像具有不同的高度，並拋出了電網。我想要的是，如果圖像高度超出.two div的預定比例高度，則需要設置類別.two的特定高度和寬度比例，並且只設置overflow: hidden。

是否有腳本甚至可以做到這一點？

2013-06-04 N-WS

我不確定我是否正確理解了你。如果您的比例是預定義的，你可以做這樣的事情：

JS：

$(document).ready(function(){ 

    var proportion = 1.75; // width/height 

    $('.two').each(function(){ 
     $(this).css('height', (parseInt($(this).width())/proportion)+'px'); 
    });  

});

而在你CSS：

.two {float: left; width: 50%; overflow: hidden;}

見這裏：http://jsfiddle.net/U2ZkU/3/

或更先進的方法（imgs尺寸也修改）：http://jsfiddle.net/U2ZkU/5/

來源

2013-06-04 23:46:53

感謝馬塞洛，這似乎是一個很好的選擇。出於某種原因，當我執行該代碼時，網格（即'.two' div）全部堆疊在一起，並且像一副或多副牌一樣。他們的身高也被擠壓。任何想法，爲什麼這可能是？ –

Mhh ...如果它在JsFiddle中工作，但不在您的站點中......可能會涉及另一個CSS o腳本。嘗試在'each'的開始處在JS中添加一些'console.log（）'（例如'console.log（parseInt（$（this）.width（）））'，看看寬度是否被正確讀取） –

是這樣的？（'（this）.width（）））。each（function（）{' –

響應divs保持相等的寬度x高度比例？

回答

相關問題