自动调整小显示器图像的大小

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