每当浏览器窗口缩小时，我应该使用哪些代码自动调整图像大小？

开始与一个空白的屏幕，假设我有以下的HTML代码：每当浏览器窗口缩小时，我应该使用哪些代码自动调整图像大小？

<body> 

    <div id="image"> 
    <img src="pic.jpg"> 
    </div> 

</body>

和CSS为：

#image{ 
width:100%; 
height:auto; 
}

或

#image img { 
width:100%; 
height:auto; 
}

我很困惑在这里，因为在图像中没有变化，因为图像div具有图像的尺寸（图像尺寸是1920×1080像素），并且其100％是整个图像本身。但如果我将宽度设置为50％，仍然没有变化。

我只是希望根据浏览器调整图像大小，我的屏幕分辨率是1366 * 768，所以最初我需要图像以适应这一点，当我调整浏览器大小时，我需要图像的大小作相应改变。

来源

2013-10-12 Rahul Khatri

'img {max-width：100％}'应该这样做。 –

@ŠimeVidas也尝试过......但没有运气。 –

http://jsfiddle.net/sAKAh/ –

设置包含div的大小不会更改图像的大小。设置风格的图像，而不是：

#image img { 
width:100%; 
height:auto; 
}

演示：http://jsfiddle.net/jcJtM/

来源

2013-10-12 20:45:06 Guffa

哦，对不起，我忘了提及.. ..但我也尝试过，但仍然没有变化 –

@RahulKhatri：当我尝试它时，它工作正常。我添加了一个指向我用来测试它的代码的链接。 – Guffa

你是对的，它的工作正常...但仍然没有响应在我的浏览器（火狐）...不知道最新错误... 是因为我使用的图像比我的屏幕分辨率大？或一些浏览器兼容？ –

你试过JavaScript的？

windowWidth = $(window).width(); 
windowHeight = $(window).height(); 

$('img').css({ 
    "width" : windowWidth, 
    "height" : windowHeight 
}); 

$(window).resize(function(){ 
windowWidth = $(window).width(); 
windowHeight = $(window).height(); 
    $('img').css({ 
    "width" : windowWidth, 
    "height" : windowHeight 
}); 
});

来源

2013-10-12 20:49:39 swsa

每当浏览器窗口缩小时，我应该使用哪些代码自动调整图像大小？

回答

相关问题