Question

我有一个滑块，它通过加载背景图像来工作。我需要调整此图像的大小，使其适合所有屏幕我知道我需要放入哪些代码行，只是不知道如何去做。我需要添加

background-size: 100% 100%;

到$style变量，我将如何做到这一点。

我试过

$style = "background-size: 100% 100%;, background:url('". Mage::getBaseUrl('media') . $s['image'] . "') 50% 0 no-repeat;";

但那加载了背景大小而不是背景。

<ul class="slides">
            <?php
            $slides = $this->getSlides();
            foreach($slides as $s) {
                $style = $content = '';
                $attr = 'data-img-height="0"';
                if ( !empty($s['image']) ) {
                    $imgSize = getimagesize(Mage::getBaseDir('media') .'/'. $s['image']);
                    if ($imgSize) {
                        $style = "background:url('". Mage::getBaseUrl('media') . $s['image'] . "') 50% 0 no-repeat;";
                        $attr = 'data-img-height="'.$imgSize[1].'"';
                    }
                }

Answer 1

默认情况下，background-size为initial（实际上是auto）。因此，在使用background时，包含background-size之前的所有与背景相关的设置都将被默认值或background声明中设置的值覆盖。因此，您应该在background-size声明后放置background。或者以您想要的任何顺序单独设置background-image，background-position，background-repeat，...。

重新调整背景图片的大小

1 个答案: