magento set image fit or fill the parent container

magento图片自适应容器大小
magento图片自适应容器大小

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