Question

我正在开发CMS，我的客户端需要以缩略图格式的响应式帖子网格。我的问题是我无法控制他们将使用的所有图像，并且正在寻找一种方法来设置与所用图像的原始宽度成比例的高度。

这对于这个jsfiddle更有意义：http://jsfiddle.net/pjwoma2/U2ZkU/

正如您所看到的，图像具有不同的高度，它会抛出网格。我想要的是设置类.two的特定高度与宽度比例，如果图像高度超出overflow: hidden div的预定比例高度，则设置.two。 / p>

是否有可以执行此操作的脚本？

Answer 1

我不确定我是否理解正确。如果您的比例是预定义的，您可以这样做：

<强> 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/

响应的div保持相等的宽度x高度比例？

1 个答案: