0

I am developing a CMS and my client requires a responsive grid of posts in the thumbnail format. My problem is that I cannot control all the images they will use and am looking for a way to set a height in proportion to the original width of the image used.

This will make more sense with this jsfiddle: http://jsfiddle.net/pjwoma2/U2ZkU/

As you can see, the images are of different heights and it throws off the grid. What I want is to set a specific height to width proportion of the class .two and just set overflow: hidden if the image height is beyond that of the predetermined proportional height of the .two div.

Is there a script which can even do this?

4

1 回答 1

0

我不确定我是否理解正确。如果您的比例是预定义的，您可以执行以下操作：

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-04T23:46:53.747 回答