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?
I'm not sure if I understood you correctly. If your proportion is predefined, you could do something like this:
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 :
.two {float: left; width: 50%; overflow: hidden;}
See it here: http://jsfiddle.net/U2ZkU/3/
Or a more advanced approach (imgs dimensions are also modified): http://jsfiddle.net/U2ZkU/5/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.