magento set image fit or fill the parent container

magento原始模板原先自带的图片处理会有白边，就是图片比例不符合代码中的尺寸时，magento会自动resize图片尺寸，并且自动加上白边。

其实去掉白边好搞，增加去白边的代码即可，如下

$this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210);

keepFrame(FALSE)这个是控制白边的，参数false就是不带白边。resize控制图片的比例，单独一个数字，如上面 200，是将图片搞成200*200的尺寸，这个只有在有白边的时候才有效，没有白边了这个resize就不太管用了，会按照实际比例缩放图片，你可以试试。

对于很多人来说也许去掉白边就够用了，但是有的时候有变态的情况，比如图片比例是1:5甚至1:10，尼玛 – – ！ 怎么会有这么变态的图片比例，这会将你的布局搞的乱七八糟。如果你有这个情况，又想控制图片的最大宽高的话，看这篇博文会有所帮助。

首先我们将magento的图片的白边去掉了，下一步就是使图片自适应到你设置的大小，即使比例差别很大，也自适应下，图片不超出你指定的长宽。相当于，你设置了图片的最大宽度，最大高度。这样对于你布局来说，会好狠多。

jquery有很多图片缩放，自适应的插件，我找到的这个是我自己认为比较合适的 http://imgscale.kjmeath.com/，当然大家也可以找自己喜欢的，或者更满足大家自己需求的js插件。

看插件的说明，他要求在图片的外层有个div或者什么的是block类型的html标签，并且css中写上宽高。

例如下面的代码，html和css部分

 <div class="product-image-container">
      <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img class="pokemon" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize(235); ?>" width="235" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
 </div>

.product-image-container{ width: 235px; height: 235px; margin:0 0 10px; text-align: center;}

如上写上了div的宽高为235px，为图片设置了一个带宽高的容器
js部分如下

jQuery(document).ready(function ($){
                $('img.pokemon').imgscale({
                    parent : '.product-image-container',
                    scale : 'fit'
                    //fade : 1000
                });
});

这样的话，就搞定了。

转载表明出处：www.hellokeykey.com