Question

我在网站上放了一个徽标。徽标大小为110px x 109px 现在，当有人试图用小型显示器查看我的网站时，我想做一些自动缩小图像尺寸的事情。

Answer 1

最简单的方法是仅指定width。如果您没有指定高度而只指定宽度，则比例保持不变。

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

JSFiddle demo: Percentage based scaling example

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

这可以通过以下方式完成：

基于百分比的缩放（在演示中显示）

CSS3媒体查询（每当屏幕尺寸增大/减小时，您都会更改父级的宽度。

JSFiddle demo: CSS3 Media Queries example

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()});
})

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

3 个答案: