爲什麼這些圖像比原始尺寸大？

我有多個圖片，我從Facebook上拉。他們被放置在一個卷軸。當你點擊一個dialog出現與實際圖像的圖像上（在滾動的圖像是縮略圖大小，你從一個網站查詢得到與src_small）爲什麼這些圖像比原始尺寸大？

我不能確定圖像的大小之前，我得到他們。有些很龐大而另一些非常小。爲了解決這個問題（因此所有圖像適合在dialog，是一個合理的規模），我嘗試這樣做：

/* 
* Image in the dialog div 
*/ 
.DialogImagesBig 
{ 
    position: relative; 
    width: 95%; 
    top: 0px; 
    left: 10px; 
} 
/* 
    * Firefox only 
    */ 
@-moz-document url-prefix() 
{ 
    /* 
     * Edits images for FF 
     */ 
    .DialogImagesBig 
    { 
     height: 95% !important; 
     width: 95% !important; 
     position: relative; 
     top: 0px; 
     left: 10px; 
    } 
}

但它實際上使一些圖像更大然後他們（大圖像較小，但小圖像是更大和像素化）。這是爲什麼？我該如何解決這個問題，以便所有圖像適合dialog而且沒有像素化？

編輯我被告知我需要使用JavaScript（或Jquery？）才能完成此操作。我會怎麼做呢？

來源

2011-05-20 Stanley Cup Phil

你使用CSS調整大小，它會使圖像「適合」，它不是一個只會使圖像變小的處理器，它使它們全部成爲95％。這意味着它會放大一些。你需要使用Javascript來做你正在嘗試的東西。 – 2011-05-20 17:21:23

你爲什麼要做FF修復？ – PeeHaa 2011-05-20 17:21:33

由於在FF中設置'width'將會關閉圖像，並且在chrome中設置'height'以及其他所有東西都會使圖像關閉 – 2011-05-20 17:27:40

你可以通過這樣得到的圖像寬度/高度：

var img = new Image(); 
img.src = _image_src_ 

img.width // returns width 
img.height // returns height 

img // returns <img src="_image_src_" />

您可以與您對話的寬度/高度的值進行比較，並完成所有的調整需要，我希望這可以幫助。

例子：

if (img.width > 100) 
    img.width = 100 

$("#image_container").html(img)

來源

2011-05-20 17:42:46

是的，我剛剛發現了另一篇文章。我認爲這是符合我想要的唯一方法 – 2011-05-20 17:46:26

你可以嘗試這樣的事情：

 

h = $('#theimage').height(); 
w = $('#theimage').width(); 

if(h > 400 && w < 500) { 
    $('#theimage').height(400); 
    $('#theimage').width = w/(h/400); 
} 
... 
...

同其他比較，適當縮小了下去。我認爲數學就在那裏......

來源

2011-05-20 17:49:51

寬度/高度95%意味着父元素的寬度/高度的95％，而不是圖像原始大小的95％。

來源

2011-05-20 17:52:18

爲什麼這些圖像比原始尺寸大？

回答

相關問題