背景圖像縮放，同時保持縱橫比

我想讓我的背景圖像像幻燈片一樣自動更改。但是，無論瀏覽器窗口的大小是多少，我都希望圖像能夠填充背景，如果縮小，則圖像的高寬比不會改變。背景圖像縮放，同時保持縱橫比

這裏是什麼，我試圖做一個例子：

http://www.thesixtyone.com/

我怎麼能完成這些任務？任何幫助都感激不盡。

2011-04-05 Sev

注意：網站在2014-07鏈接。 – 2014-07-14 11:14:31

由於@drudge在下面提到background-image：包含就是你需要的這個效果。 – 2015-06-17 04:14:05

剛剛意識到我在上面評論錯誤...你想使用背景圖像：** **蓋。 IOS Safari的2個已知問題[http://caniuse.com/#search=background-image]（http://caniuse。com /＃search = background-image） – 2015-06-17 04:21:27

你不能，至少不會像你現在要做的那樣。

你能做什麼，但是，是創建一個<img>代替，並用CSS設置position:absolute，它擴展到100％的寬度，並與overflow:hidden

例如從父裁剪：http://jsfiddle.net/GHmz7/4/

來源

2011-04-05 23:38:10

以及如何讓它落後於我網頁上的所有其他元素？ z值？ – Sev 2011-04-05 23:40:46

在CSS中：'z-index：-1' – 2011-04-05 23:41:40

當您調整瀏覽器大小時，您的示例將擴展圖像的寬度（更改寬高比）。我不希望寬高比發生變化......就像我上面鏈接的例子一樣。 – Sev 2011-04-05 23:43:05

不能可靠地調整背景圖像在所有瀏覽器/版本等等

你thesixtyone.com網站上看到由正常的內嵌圖像拉伸到它100％，實現的效果是容器，這是一種佔位符分割。其他元素然後漂浮在這個「背景」部門的頂部。

所以答案不是使用背景圖像，而是讓圖像填充佔位符中的屏幕，然後將其他元素放在其上。

來源

2011-04-05 23:34:19

考慮刪除這個答案，自2011年以來，事情已經發生.CSS3允許通過背景大小。 – DalSoft 2014-01-05 15:46:16

使用CSS3，您可以使用background-size屬性。

background-size: contain; 縮放圖像，同時保留其固有長寬比（如果有的話），使其寬度和高度都能夠放入背景定位區域內。

Contain始終適合您的視口內的整個圖像，只要背景圖像和瀏覽器窗口的比率不相同，就會在不透明邊框的上下或左右兩側留下不透明的邊框。

background-size: cover; 將圖像縮放至最小尺寸，同時保持其內部縱橫比（如果有的話），使其寬度和高度均可完全覆蓋背景定位區域。

Cover總是充滿瀏覽器窗口，切斷的過程中，這是我個人更喜歡在大多數情況下的一些頭髮或耳朵。您可以通過使用background-position屬性來控制圖像在視口內的對齊方式。

來源

2011-04-05 23:34:59 drudge

感謝有關'background-size'屬性的詳細解釋。 – rxgx 2012-03-25 10:28:49

對於那些好奇的，這個選項的caniuse頁面。 http://caniuse.com/#feat=background-img-opts 覆蓋率相當不錯。 – 2013-04-16 17:30:27

你可以嘗試的jQuery/JS來更改背景圖片：

<!doctype html> 
<html> 
    <head> 
     <title>Width resolution</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style type="text/css"> 
      body { 
       font-size: 20px; 
       font-family: arial,helvetica,sans-serif; 
       font-weight: 700; 
       color:#eee; 
       text-shadow: 0px 0px 1px #999; 
} 
      div { 
       width:auto; 
       height:340px; 
       border:#ccc groove 2px; 
       padding:5px; 
      } 
     </style> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('body').css({'background-color':'#ccc'}); 

       var sw = screen.width; 

      function wres() { 
       switch(sw) { 
        case 1920: 
         $('div').css({'background':'#192000 url(bg-1920.jpg)'}); 
         $('body').css({'background':'#001920 url(bg-1920.jpg)'}); 
         break; 
        case 1600: 
         $('div').css({'background':'#160000 url(bg-1600.jpg)'}); 
         $('body').css({'background':'#001600 url(bg-1600.jpg)'}); 
         break; 
        case 1280: 
         $('div').css({'background':'#128000 url(bg-1280.jpg)'}); 
         $('body').css({'background':'#001280 url(bg-1280.jpg)'}); 
         break; 
        case 1152: 
         $('div').css({'background':'#115200 url(bg-1152.jpg)'}); 
         $('body').css({'background':'#001152 url(bg-1152.jpg)'}); 
         break; 
        default: 
         $('div').css({'background':'#102400 url(bg-1024.jpg)'}); 
         $('body').css({'background':'#001024 url(bg-1024.jpg)'}); 
       } 
        //alert(rsw); 
        //$('div').html(rsw); 
        $('.res').append(' '+sw); 
        $('div.res').css('width', 1920); 
       } 
       //alert(sw); 
       wres(); 
      }); 
     </script> 
    </head> 
    <body> 
     <h1 class="res">Resolução atual:</h1> 
     <div class="res">The div</div> 
    </body> 
</html>

可以爲背景，而不是創建CSS類，並使用.toggleClass（）

來源

2011-04-06 03:06:45 tenshimsm

爲什麼使用JS時，你可以簡單地使用CSS媒體查詢？ – 2016-02-24 08:53:53

背景圖像縮放，同時保持縱橫比

回答

相關問題