每当浏览器窗口变窄时，我应该使用什么代码来自动调整图像大小？答案

【问题标题】：what code should i use to automatically resize an image, whenever the browser window is made narrow?每当浏览器窗口变窄时，我应该使用什么代码来自动调整图像大小？
【发布时间】：2013-10-13 04:51:02
【问题描述】：

从空白屏幕开始，假设我有以下 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，所以最初我需要图像来适应它，当我调整浏览器大小时，我需要相应地改变图像的大小。

【问题讨论】：

img { max-width:100% } 应该这样做。
@ŠimeVidas 也试过这个......但没有运气。
jsfiddle.net/sAKAh
@ŠimeVidas 是的，它也有效...我想我需要安装一个新的浏览器并尝试...谢谢

标签： html css

【解决方案1】：

设置包含 div 的大小不会改变图像的大小。改为在图像上设置样式：

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

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

【讨论】：

哦，对不起，我忘了提..但我也试过了，但仍然没有改变
@RahulKhatri：当我尝试时，它工作正常。我添加了一个指向我用来测试它的代码的链接。
你是对的，它工作正常......但在我的浏览器（firefox）中仍然没有响应......不知道怎么了......是不是因为我使用的图像比我的大屏幕分辨率？还是一些浏览器兼容性？
在响应式设计中，一般的模式是在图片上做max-width: 100%，不同的是如果视口比图片大，图片不会被拉伸。
@RahulKhatri：我在 Firefox 中测试了代码，但这是非常基本的，并且在所有浏览器中都一样。可能有其他样式干扰了此功能。

【解决方案2】：

你试过 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
});
});

【讨论】：