CSS或HTML幫助設置圖像的最大寬度和高度

我在表格中有一個塊，其中用戶的配置文件圖片顯示。但爲了保持設計空間，我製作了寬度爲200px，高度爲300px的塊大小。現在，我設置了用戶的圖片下面的CSS樣式：CSS或HTML幫助設置圖像的最大寬度和高度

.max{ 
max-width:200px; 
max-height:300px; 
}

如果有大的畫面（假設300x400像素），然後重新大小到200x300像素（行善）。但我的問題是，如果有一個小圖片（假設100x150px），那麼它也會將其重新設置爲200x300px。但我想設置最大寬度和高度。所以在我的情況下，我想要顯示圖片的原始大小，如果它小於200x300px。但如果它是大圖片，那麼它將重新調整大小爲200x300px。任何幫助PLZ（我怎麼能做到這一點？）... - （Internet Explorer 8.0測試）

如果它不能在CSS中做，HTML是否有任何JavaScript選項？有沒有可用的良好來源？

來源

2011-09-27 Haren Sarma

我們可能需要更多的HTML/CSS來提供幫助。這個問題可能不在max類的定義中。 –

如果您在構建頁面時知道圖像，則使用簡單的ID標記是解決方案，但是當用戶上傳圖像時，必須使用腳本（PHP或Javascript等），否則html和CSS解決方案可能不可用 – SpeedBirdNine

.max{ 
    height: auto; 
    max-width: 100%; 
}

指定TD寬度200像素，併爲表 - 表佈局：固定。

這應該解決您的問題

來源

2011-09-27 18:11:02 Bala

你的回答對我有用......謝謝 –

-1

你說的話很奇怪。

聽起來好像你正在設置width和height而不是max-*。

我建議你創建一個簡單的fiddle，看看問題是否依然存在。如果是的話，然後張貼一個URL，我可以看看它。

來源

2011-09-27 18:04:21 Guard

最大寬度和高度只是..最大，所以，它不應該影響較小的圖像。

我只是做了一個文本的HTML頁面，較小的圖像工作得很好，最大高度和寬度設置。

來源

2011-09-27 18:08:33

您可以使用：

.max { 
    max-width: expression(this.width > 200 ? 200: true); 
}

來源

2011-09-27 18:10:43

不知道太多關於CSS，但這應該做的jQuery的

$('.images_class').each(function(){ 
    height = $(this).height(); 
    width = $(this).width(); 
    if(height > 200 || width > 300) 
    $(this).css('height','200px').css('width','300px'); 
});

來源

2011-09-27 18:13:48

...你可能不得不求助於的javascript，如果我明白你的問題正確地這樣的事情可能做到這一點：

$(document).ready(function(){ 

$('img').each(function(){ 
    if( ($(this).width() < 200) && ($(this).height() < 300)){ 
     $(this).css({'width' : $(this).width() +'px', 'height' : $(this).height() + 'px')   
    } 
})

}）

...牛逼他會涉及jQuery，也沒有機會測試。

來源

2011-09-27 18:14:11 vector

CSS或HTML幫助設置圖像的最大寬度和高度

回答

相關問題