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を介して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を使用して正しい位置に配置できましたが...サイズ変更を製品画像に「バインド」して、「一緒に」スケーリングできるようにする方法がわかりません(画像製品、image-top.pngおよびimage- bottom.png) まるで 1 つの画像であるかのように。

画像 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">

コンテナーであり、正しくサイズ変更されるようになりました。image-top.png のサイズ変更を「微調整」して、div コンテナーの幅を狭くするために、パディング ライトを追加しました。

于 2014-09-20T15:30:42.937 に答える