基于容器宽度的图像缩放

Question

I'm building an image gallery using Packery, a content packing script in jQuery.

 <script> var $container = $('#content'); // init $container.packery({ itemSelector: '.item', gutter: 10, }); </script> 

 <div id="content"> <div class="item" style="height: 388px; width: 259px;"> <span class="back"></span> </div> </div> 

(Because of some complicated inline styling issues, the images themselves are being displayed as spans of certain size that are styled as having the image as their background.)

Currently, because of uniformity of size amongst the images, they pack really nicely in their containing div. However, when the size of the container changes due to something like a smaller browser window, the packing gets really nasty.

What I'd ideally be able to do is have all the images scale down by a certain percent based on what percent of its original size the containing div is (1324px is full size in this case), so that for example, if the container is resized to 1192px, 90% of the original size, all the images resize to 90% as well.

Is there any way to do this using jQuery or CSS?

Answer 1

ElasticCSS can help you do this. It allows you do just that.

<div class="unit columns same-height">
    <div class="column">first column content</div>
    <div class="column">second column content</div>
</div>

Imagine that your images are columns, then when the parent gets resized they will all get resized. Give it a try.