0

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

我尝试使用 css 伪元素（：before 和 :after），但我无法调整大小，老实说，我注意到奇怪的行为（最初不显示图像，仅在调整 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 在 vi​​ew.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，我可以将其放置在正确的位置，但是...我不知道如何将调整大小与产品图像“绑定”，以便它们可以缩放“togheter”（图像产品、image-top.png 和 image- bottom.png) 就像它们只是一张图片一样。

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

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

4

1 回答 1

0

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

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

调用文件 /template/catalog/product/view/media.phtml 所以我把我的<img>里面

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

容器，现在它们正确调整大小。对于 div 容器宽度较小的 image-top.png 的“微调”调整大小，我添加了一些 padding-right。

于 2014-09-20T15:30:42.937 回答