根據jQuery中的尺寸調整每個圖像的大小

我已經得到了如何實現這個結果的基本概念，但是我似乎無法真正獲得我想要的結果。我正在創建存儲圖像的100px（高度）x 75px（寬度）的固定容器。然後，我試圖使用jQuery來檢查圖像高度是否大於寬度，反之亦然，或者它們是平等的。如果它們相等或寬度較大，我將它們設置爲100％，並將高度設置爲自動，而如果高度爲較大值，則將其設置爲100％，並將寬度設置爲自動。下面是目前我正在調整圖像大小的代碼，但不是我想要它們的方式。根據jQuery中的尺寸調整每個圖像的大小

HTML

<div id="imagesContainer"> 
    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 100 x 500 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 250 x 280 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 100 x 100 IMAGE HERE"></img> 
     </div> 
    </div> 

    <div style="height: 100px; width: 75px; border: 1px solid RGB(0, 0, 0);"> 
     <div class="thumbImage"> 
      <img src="INSERT 1800x900 IMAGE HERE"></img> 
     </div> 
    </div> 
</div>

jQuery的

$(".thumbImage").children("img").each(function(){ 
    if ($(this).height() > $(this).width()) { 
     $(this).css({ 
      height: '100%', 
      width: 'auto' 
     }); 
    } else if ($(this).height() < $(this).width() || ($(this).height() == $(this).width()) { 
     $(this).css({ 
      height: 'auto', 
      width: '100%' 
     }); 
    } 
});

來源

2013-06-25 Banny

它做什麼？你能爲此設置一個jsfiddle，所以我們可以看到發生了什麼？ –

它應該調整圖像大小，以便它們能夠正確放入容器中。我在描述這個問題時寫了這個。 – Banny

您應該計算圖像的比例寬度/高度以及容器的比率寬度/高度（此處爲0.75）並進行比較。 – YD1m

問題是，你正在測試的圖片的高度和寬度之間的差別......它將工作完美，如果容器是方形的，但由於它是一個矩形，這是錯誤的。

這裏：

$(".thumbImage").children("img").each(function(){ 
    imgRatio = $(this).height()/$(this).width(); 
    containerRatio = $(this).parent().height()/$(this).parent().width(); 
    if (imgRatio > containerRatio) { 
     $(this).css({ 
      height: '100%', 
      width: 'auto' 
     }); 
    } else { 
     $(this).css({ 
      height: 'auto', 
      width: '100%' 
     }); 
    } 
});

不知道，如果代碼是100％正確的，沒有測試。但基本上我們測試了高度/寬度的比率，並將其與容器比率進行比較，以便能夠決定我們所做的調整大小。

來源

2013-06-25 08:52:28 Salketer

我會研究這個，看看它是如何爲我工作的。我正在尋找一些非常相似的東西，雖然我想要它，所以如果我重新調整週圍容器的大小，圖像只是反應了我決定做的任何尺寸。 – Banny

那麼這個解決方案應該適合你。 – Salketer

乾杯。我會玩弄它並理解它是如何工作的！ – Banny

你在你的腳本中有語法錯誤，和 '.thumbImage' 必須設置爲100％的高度：

語法錯誤：

if($(this).height() < $(this).width() || ($(this).height() == $(this).width()))

（你錯過了一個右括號）

CSS：

.thumbImage { 
    height:100%; 
}

JS小提琴： http://jsfiddle.net/fMhr2/1/

此外，您應該計算比得到它正常工作，就像Salketer剛剛提到。我補充說，這個JSFiddle

來源

2013-06-25 08:51:33

不錯的一個！我會將Salketer的答案標記爲正確的，但是感謝您提供了小提琴，我只是在展示我遇到的問題，但您已經很快解決了這個問題。 – Banny

根據jQuery中的尺寸調整每個圖像的大小

回答

相關問題