重新調整大小背景圖像

我有一個滑塊，它通過在背景圖像中加載起作用。我需要調整此圖像的大小以適應所有屏幕我知道我需要放置哪些代碼行，但不知道如何處理它。我需要添加重新調整大小背景圖像

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].'"'; 
        } 
       }

來源

2014-06-26 Adam Allen

將'background-size' ***放在'background'後面，否則會被默認值'background'重寫。 –

非常感謝，我知道會很容易，但是不能解決哈哈。再次感謝你，如果你想寫它作爲答案，我會接受它。 –

您也可以使用「背景」CSS屬性的「封面」屬性。然後瀏覽器將調整寬高比。非常方便，不需要任何PHP，並提高性能！ – ToBe

默認情況下，background-size是initial（這實際上是auto）。因此，在使用background時，在包含background-size之前的所有背景相關設置將被默認值或background聲明中設置的值覆蓋。所以你應該在background聲明之後放置background-size。或者按您想要的任何順序分別設置background-image，background-position，background-repeat，...。

來源

2014-06-26 10:38:31

這更好地寫在其他成員的答案:) –

@ ZahidKhan是的，我只是覺得它太基本了，回答需要更多的解釋，所以有時沒有任何提議從OP添加答案，我不會添加它:) –

重新調整大小背景圖像

回答

相關問題