简体   繁体   English

我可以使Magento产品视图中的图像具有设定的宽度,但具有可变的高度吗?

[英]Can I make the images in the product view of Magento have a set width, but a fluid height?

I'm developing a website for an art gallery so all of their product images have different widths and heights depending on the art piece. 我正在开发一个美术馆的网站,因此根据艺术品的不同,其所有产品图片的宽度和高度都不同。 I want the image to display at 630px wide every time but depending on the image, extend longer down the page than others. 我希望图像每次都以630像素的宽度显示,但是根据图像的不同,其在页面下方的延伸比其他图像更长。 Currently, I know that I can adjust the $bigImageX and $bigImageY of the product images from the media.php file located in 目前,我知道可以从位于以下位置的media.php文件调整产品映像的$ bigImageX和$ bigImageY

/app/design/frontend/default/theme706/template/ecommerceteam/cloud-zoom/catalog/product/view / app / design / frontend / default / theme706 / template / ecommerceteam / cloud-zoom / catalog / product / view

but this is only allowing me to set a specific width and height. 但这仅允许我设置特定的宽度高度。 If I set only the height, it shrinks so that the width is the same as the height. 如果仅设置高度,则会缩小以使宽度与高度相同。

<div class="product-img-box">
    <script type="text/javascript" src="http://citizen.bluelotuscreative.com/skin/frontend/default/theme706/js/klass.min.js"></script>
    <script type="text/javascript" src="http://citizen.bluelotuscreative.com/skin/frontend/default/theme706/js/code.photoswipe.jquery-3.0.5.js"></script>


    <div class="product-box-customs">
        <p class="product-image">
        <img src="http://citizen.bluelotuscreative.com/media/catalog/product/cache/1/image/630x630/9df78eab33525d08d6e5fb8d27136e95/placeholder/default/Citizen_Atelier_-_Ashley_Woodson_Bailey_2__2.jpg" alt="Test Product" title="Test Product" />    </p>

    </div>
</div>

$bigImageX  = 630;
$bigImageY = ???;

<div class="product-box-customs">
    <?php if ($product->getImage() != 'no_selection' && $product->getImage()): ?>

    <p class="product-image">
        <a  href='<?php echo $this->helper('catalog/image')->init($product, 'image')->resize($bigImageWidth, $bigImageHeight);?>' class = 'cloud-zoom' id='zoom1' rel="<?php echo implode($config, ',');?>">
            <img class="big" src="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize($bigImageX, $bigImageY);?>" alt='' title="<?php echo $this->htmlEscape($this->getImageLabel());?>" />
        </a>
    </p>

    <?php else: ?>
    <p class="product-image">
        <?php
        $_img = '<img src="'.$this->helper('catalog/image')->init($product, 'image')->resize($bigImageX, $bigImageY).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
        echo $outputHelper->productAttribute($product, $_img, 'image');
        ?>
    </p>

Replace: 更换:

$this->helper('catalog/image')->init($product, 'image')->resize($bigImageWidth, $bigImageHeight);

With this: 有了这个:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM