Question

在Magento 1.9.0.1中，如何在图像产品（产品页面）上重叠2张图像，并以与更改分辨率时图像产品调整大小相同的方式调整它们的大小？

我尝试使用css伪元素（：之前和之后），但我无法调整大小并且说实话我注意到了奇怪的行为（图像最初没有显示，只有在你调整大小时才出现Chrome / Firefox窗口......）。

.product-image.product-image-zoom.zoom-available:before {
    content: url("/media/css/image_top.png");
    z-index: 10;
    position: absolute;
    top: -6px;
    left: -5px;
}

.product-image.product-image-zoom.zoom-available:after {
    content: url("/media/css/image_bottom.png");
    z-index: 10;
    position: absolute;
    bottom: -4px;
}

所以或者，我试图通过html在view.phtml中插入图片

......
<div class="product-img-box">
    <div class="product-name">
        <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
    </div>
        <img src="media/css/image-top.png">
        <img src="media/css/image_bottom.png">        
        <?php echo $this->getChildHtml('media') ?>
</div>
.......

和类似的CSS我能够把它放在正确的位置，但是......我不知道如何＆＃34;绑定＆＃34;调整产品形象大小，以便他们可以扩展＆＃34; togheter＆＃34; （image product，image-top.png和image-bottom.png）就好像它们只是一个图像一样。

图片1：http://s30.postimg.org/7fnfl2yrl/screen.png

图片2：http://s30.postimg.org/78z4gzh0x/screen3.png

Answer 1

我只是一个笨蛋，我现在意识到在view.phtml

<?php echo $this->getChildHtml('media') ?>

调用文件/template/catalog/product/view/media.phtml，所以我将<img>放入

<div class="product-image-gallery">

容器，现在他们正确调整大小。对于image-top.png的“微调”调整，不太宽的div容器我添加了一些填充权。

如何在Magento中的图像产品上重叠2张图像？

1 个答案: