強大的方式來顯示一個固定尺寸的圖像

可以說，我們有一個由用戶上傳的圖像，上傳腳本限制MB，但不是圖像大小（所以可以是任何比例，600X200,200X350，等等。 ..）。強大的方式來顯示一個固定尺寸的圖像

林已經顯示出在使用Twitter的引導image handler寫在CSS我的網站的一部分這一形象，這就是很好的一個資料圖片，問題是，現在我想的形象是一個蓋（如Facebook/Twitter的cover image ），我的網站是敏感的，所以如果屏幕分辨率小於900px寬，封面的寬度是900px或100％。高度始終固定爲200px。所以我知道有一種方法可以使用CSS控制正確的圖像顯示（也許使用jquery），但我不是前端開發人員，我是一名php開發人員，我不想使用服務器端腳本來執行此操作。所以即時尋找建議或代碼（CSS，JavaScript）開始，我相信它必須是一個已經做出的解決方案，但我沒有找到任何谷歌。感謝您的任何建議！

來源

2012-11-10 DomingoSL

解決方法有很多，但你可以張貼一些現有的HTML/CSS代碼PLZ？ –

我肯定會不建議使用css-only解決方案。如果上傳的圖片可以有任何解決方案，甚至不是客戶端解決方案。您希望使用php腳本來保存已上傳圖片的大小調整版本並將其提供給客戶端。要麼作爲塊的背景圖像，並使用CSS（不跨瀏覽器）或作爲一個img標籤，並使用JS來調整大小。

CSS：

.myselector{ 
    background-size: cover; 
}

或JS（jQuery的）：

$(function(){ 
    var containers = $('.myselector'), w = $(window); 
    function onResize(){ 
     //resize code 
     containers.each(function(){ 
      var $this = $(this), 
       w = $this.width(), 
       h = $this.height(), 
       ratio = w/h, 
       $img = $('img',$this); // assuming there is only one img in each container 
      $img.css({'width':'auto','height':'auto'}); 
      var iw = $img.width(), ih = $img.height(), iratio = iw/ih; 
      if(iratio>ratio){ 
       $img.css({ 
        height:'100%', 
        width:'auto', 
        marginLeft: (w-iw*(h/ih))/2 
       }); 
      } 
      else{ 
       $img.css({ 
        width:'100%', 
        height:'auto',, 
        marginTop: (h-ih*(w/iw))/2 
       }); 
      } 
     }); 
    } 
    w.bind('resize',onResize); 
    //resize on each image load event 
    $('img',containers).bind('load',onResize); 
    onResize(); 
});

這裏是工作提琴：http://jsfiddle.net/kHxd2/2/

圖像的onload監聽器可能需要tweeking當緩存圖像反應在IE中呈現：http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

你也可能想爲罕見的非js瀏覽器設置css規則......（。myselector IMG {寬度：100％;}）

編輯：容器的CSS：

.myselector{ 
    width: 100%; 
    max-width: 900px; 
    height: 200px; 
    margin: auto; /* centering */ 
    overflow: hidden; 
}

看到更新撥弄：http://jsfiddle.net/kHxd2/3/

最佳解決方案是要嵌入圖像容器中，主包裝DIV和將上述css規則應用於該大容器。

下面是一些有用的代碼，以服務器端的大小調整的護理：http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html

來源

2012-11-10 10:43:05

爲什麼你不建議只使用CSS？ – DomingoSL

不，我正在編輯我的答案... –

我認爲現在沒問題。它使用js和js生成的css。 –

你必須把這個圖像作爲背景圖像，然後使用樣式：

background-image: url(url/to/your/image.png); 
background-size: cover;

來源

2012-11-10 10:39:21 LorDex

這是css3，html5還是隻是老派？ – DomingoSL

不，它是css3屬性。對於IE你可以使用這個解決方案：[鏈接]（http://stackoverflow.com/questions/2991623/make-background-size-work-in-ie） – LorDex

這似乎是一個漂亮和聰明的解決方案！，你呢知道如何解決分辨率小於900px的分辨率大於900px的問題，分辨率大於1000px的分辨率和100％的分辨率？與CSS太 – DomingoSL

有稱爲background-size:cover;和background-size:contain;在CSS3屬性。您可能想要使用它們來滿足您的需求。

包含

指定背景圖像應該被縮放，同時確保它的兩個尺寸小於或等於所述背景定位區域的相應的尺寸，以儘可能地大。

蓋

指定背景圖像應該被縮放，同時確保它的兩個尺寸大於或等於背景定位區域的相應的尺寸儘可能地小。

來源

2012-11-10 10:39:30 defau1t

強大的方式來顯示一個固定尺寸的圖像

回答

相關問題