当浏览器的宽度/高度变化时，如何使用CSS动态调整图像大小？

我不知道如何与浏览器窗口一起调整图像大小，这是我到目前为止所做的（或将整个网站下载为ZIP格式）。

这在Firefox中可以正常工作，但在Chrome中却存在问题：图像不一定总是调整大小，它在某种程度上取决于加载页面时窗口的大小。

在Safari中也可以，但是有时会以最小宽度/高度加载图像。我不确定这可能是图像尺寸引起的。（如果加载正常，请尝试刷新几次以查看错误。）

关于如何使它更加防弹的任何想法？（如果需要JavaScript，我也可以接受，但是最好使用CSS。）

这可以使用纯CSS完成，甚至不需要媒体查询。

要使图像灵活，只需添加max-width:100%和height:auto。图像max-width:100%并height:auto在IE7中可用，但在IE8中不可用（是的，另一个怪异的IE错误）。要解决此问题，您需要添加width:auto\9IE8。

来源：http：//webdesignerwall.com/tutorials/response-design-with-css3-media-queries

CSS：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

而且，如果您想强制使用固定的图片最大宽度，只需将其放在容器中即可，例如：

<div style="max-width:500px;">
    <img src="..." />
</div>

JSFiddle示例在这里。无需JavaScript。在最新版本的Chrome，Firefox和IE（我测试过的所有版本）中均可使用。

2018年及以后的解决方案：

鉴于我们拥有一只猫的形象，使用相对于视口的单位应该使您的生活更轻松：

现在，我们希望这只猫在我们的代码中，同时注意长宽比：

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

到目前为止，这并不是很有趣，但是如果我们想将猫的宽度更改为最大视口的50％怎么办？

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

相同的图像，但现在限制为最大宽度为50vw vw（=视口宽度），这意味着该图像将是视口的X宽度，具体取决于所提供的数字。这也适用于身高：

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

这会将图像的高度限制为最大20％的视口。

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

在IE onresize事件中，每次像素变化（宽度或高度）都会触发，因此可能会出现性能问题。通过使用javascript的window.setTimeout（），将图像调整大小延迟几毫秒。

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

将大小调整属性设置为两者。然后，您可以像这样更改宽度和高度：

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

您正在使用jQuery吗？

因为我在jQuery插件上进行了快速搜索，并且它们似乎有一些插件可以执行此操作，所以请检查一下该插件是否可以工作：

http://plugins.jquery.com/project/jquery-afterresize

编辑：

这是CSS解决方案，我只添加了style =“ width：100％”，至少对我来说适用于chrome和Safari。我没有ie，所以只在那里测试，让我知道，这是代码：

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

最初，我使用以下html / css：

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

然后我添加class="img"到<div> 这样的：

<div class="img">
  <img src="..." />
</div>

一切开始正常。

您可以使用CSS3 scale属性使用CSS 调整图片大小：

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

进一步阅读：

• CSS3 2D转换
• CSS3悬停效果过渡，转换，动画

只需使用此代码。最让我们忘记的是将max-width指定为图像的最大宽度

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

检查此演示 http://shorturl.at/nBKVY

尝试

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

仅适用于显示块和内联块，这对伸缩项目没有影响，因为我花了很长时间尝试找出答案。