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

Question

我想知道如何使图像随着浏览器窗口调整大小，这里是我到目前为止所做的（或下载ZIP中的整个网站）。

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

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

关于如何使其更加防弹，有什么想法吗？ （如果需要 JavaScript，我也可以接受，但 CSS 更好。）

Answer 1

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

要使图像灵活，只需添加

max-width:100%

和

height:auto

。图像

max-width:100%

和

height:auto

适用于IE7，但不适用于IE8（是的，另一个奇怪的IE错误）。要解决此问题，您需要为 IE8 添加

width:auto\9

。

来源：http://webdesignerwall.com/tutorials/responsive-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（这是我测试过的所有版本）。

Answer 2

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%。

Answer 3

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

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

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

Answer 4

onresize

Answer 5

因为我快速搜索了 jQuery 插件，他们似乎有一些插件可以做到这一点，检查这个，应该可以工作：

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

编辑：

这是 CSS 解决方案，我只需添加一个

style="width: 100%"

，并且至少在 chrome 和 Safari 中对我有用。我没有 ie，所以只需在那里测试一下，然后告诉我，这是代码：

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

Answer 6

            <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>

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

然后我将 

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

添加到

class="img"

中，如下所示：<div>

一切都开始正常工作。

Answer 7

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

Answer 8

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

属性通过 css 调整图像大小：

scale

进一步阅读

：

CSS3 2D 变换
CSS3 悬停效果过渡、变换、动画

Answer 9

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

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

Answer 10