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

Question

我在我的网站上放置了一个标志。Logo尺寸:110px x 109px现在我想做一些事情，当有人试图用小显示器查看我的网站时，自动使图像尺寸变小。

Answer 1

最简单的方法是只指定width。如果你不指定高度，只指定宽度，比例保持不变。

现在你必须给它一个基于百分比的宽度，以便它与它的父元素缩放。

JSFiddle演示:基于百分比的缩放示例

注意:当你把屏幕尺寸变小时，父母的尺寸必须改变。

可以这样做:

• 基于百分比的缩放(如演示所示)
• CSS3媒体查询(当屏幕大小增加或减少时，您可以改变父元素的宽度。

JSFiddle演示:CSS3媒体查询示例

Answer 2

这样应该可以。

<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 3

试试这个

使用jQuery

$(document).ready(function(){
    $(document).resize(function(){
   $('body').css({'min-height':$(window).height()});
   });
   $('body').css({'min-height':$(window).height()});
})