自動調整小顯示器圖像的大小

Question

我在我的網站上放置了一個徽標。 標誌大小是110px x 109px 現在，我想要做一些事情，當有人試圖用小型監視器查看我的網站時，會自動縮小圖像大小。

Answer 1

像這樣的東西應該工作。

<div class="logo"> 
    <img src="logo.png" alt="Logo" /> 
</div> 

而CSS，

.logo img { 
    width: 110px; 
    height: auto; 
} 

@media only screen and (max-width: 320px) { 

    .logo img { 
     max-width: 60px; 
     height: auto; 
    } 

} 

見響應樣式表 http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Answer 2

只是試試這個。

使用jQuery

$(document).ready(function(){ 
    $(document).resize(function(){ 

    $('body').css({'min-height':$(window).height()}); 
    }); 
    $('body').css({'min-height':$(window).height()}); 
}) 

Answer 3

最簡單的方法是隻指定width。如果您沒有指定高度，只有寬度，則比例保持不變。

現在你必須給它一個基於百分比的寬度，以便它與父母一起縮放。

JSFiddle demo: Percentage based scaling example

注意：當你在屏幕尺寸較小 父母的大小必須改變。

這可以通過以下方式進行：

• 基於百分比比例（在演示顯示）
• CSS3媒體查詢（您更改父的寬度每當屏幕尺寸的增大/減小

。

JSFiddle demo: CSS3 Media Queries example