从空白屏幕开始，假设我有以下 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，所以最初我需要图像来适应它，当我调整浏览器的大小时，我需要相应地改变图像的大小。
设置包含 div 的大小不会改变图像的大小。改为在图像上设置样式：
#image img {
width:100%;
height:auto;
}
演示：http: //jsfiddle.net/jcJtM/
你试过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
});
});