基于容器宽度的图像缩放

Question

我正在使用Packery构建一个图库，这是一个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>

（由于一些复杂的内联样式问题，图像本身显示为特定大小的跨度，其风格为将图像作为背景。）

目前，由于图像之间尺寸的一致性，它们非常适合包含div。但是，当容器的大小因浏览器窗口较小而发生变化时，包装变得非常糟糕。

我理想情况下可以根据包含div的原始大小百分比（在这种情况下为1324px是完整大小）将所有图像缩小一定百分比，例如，如果容器的大小调整为1192px，原始大小的90％，所有图像也会调整为90％。

有没有办法用jQuery或CSS做到这一点？

Answer 1

ElasticCSS可以帮助您做到这一点。它允许你做到这一点。

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

想象一下，您的图像是列，然后当父级调整大小时，它们都会被调整大小。试一试。