[英]Responsive divs maintain equal width x height proportions?
I am developing a CMS and my client requires a responsive grid of posts in the thumbnail format. 我正在开发CMS,我的客户需要缩略图格式的响应式网格。 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/ 使用此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. 我想要的是将特定高度设置为类
.two
宽度比例,然后设置overflow: hidden
如果图像高度超出.two
div的预定比例高度,则将其.two
。
Is there a script which can even do this? 是否有一个脚本甚至可以做到这一点?
I'm not sure if I understood you correctly. 我不确定我是否理解正确。 If your proportion is predefined, you could do something like this:
如果您的比例是预定义的,则可以执行以下操作:
JS: JS:
$(document).ready(function(){
var proportion = 1.75; // width / height
$('.two').each(function(){
$(this).css('height', (parseInt($(this).width())/proportion)+'px');
});
});
And in your CSS : 在您的CSS中 :
.two {float: left; width: 50%; overflow: hidden;}
See it here: http://jsfiddle.net/U2ZkU/3/ 在这里查看: http : //jsfiddle.net/U2ZkU/3/
Or a more advanced approach (imgs dimensions are also modified): http://jsfiddle.net/U2ZkU/5/ 或更高级的方法(还修改了imgs尺寸): http : //jsfiddle.net/U2ZkU/5/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.