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

Question

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

在Firefox中这还可以，但是在Chrome中有问题：图像并不总是调整大小，它似乎取决于页面加载时窗口的大小。

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

有什么想法可以使它更加健壮？（如果需要JavaScript，我也可以接受，但CSS更可取。）

- depi

---

使用CSS3媒体查询或JavaScript的window.onresize事件处理程序。http://www.w3schools.com/jsref/event_onresize.asp - Shahid

如果您正在使用Bootstrap，请添加一个类，例如class="img-thumbnail"。就这样。 - VivekDev

这个回答解决了你的问题吗？如何自动调整图像大小以适应'div'容器？ - vsync

Answer 1

使用纯CSS即可实现此操作，甚至不需要媒体查询。

要使图像具有弹性，请简单地添加max-width:100%和height:auto。 图像的max-width:100%和height:auto在IE7中有效，但在IE8中无效（是的，又是IE的另一个奇怪bug）。 要解决这个问题，您需要为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浏览器版本中都可以正常工作（这是我测试过的所有版本）。

- Kurt Schindler

---

我使用Opera 11和一些最近的Firefox测试了jsfiddle链接，当窗口缩小时，它可以很好地调整图像大小，但当窗口增大超过650px时，它无法实现。 - GDR

我不希望这张图片超出其本来的大小，否则它会变得模糊且难看。如果你需要更大的图片，最好使用一个更大的原始图片开始。 - Kurt Schindler

好的，那么我错误地假设这是这个问题的重点，抱歉。 - GDR

将max-width设置为100％，将height设置为auto对我没有任何作用 - 我确实使用了容器。将图像放入div中，设置max height / width，然后让图像（#div img {}）宽度为100％，高度为100％。 - Mave

这是什么神奇的魔法？！太棒了！ - Leonardo Wildt

对于任何想知道auto\9的作用的人，请参见问题CSS \9 in width property。基本上，它只会在IE 7、8和9中应用样式。 - Frank Tan

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

- roberrrt-s

---

谢谢！当我有不同尺寸的图像时，如何确定vh和vw？ - Herman Toothrot

嗨@HermanToothrot，你是说你想在使用视口单位的同时保持纵横比吗？ - roberrrt-s

@Roberrrt说我有几张不同尺寸的图片，并且以内联块的形式呈现，我想保持它们所有的纵横比但将它们设置为相同的高度或宽度。 - Herman Toothrot

要么使用width: 100%和max-height: 50vh，要么反过来。 - roberrrt-s

@Roberrrt width: 100%似乎没有太大的影响。我只能猜测vh，在我的情况下50太多了，40最大化了所有图像的高度。 - Herman Toothrot

Answer 3

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

- Shahid

Answer 4

将resize属性设置为both。然后，您可以像这样更改宽度和高度：

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

- fmoradi9

Answer 5

您是否正在使用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>

- Arthur Neves

---

jQuery对于这样一个简单的问题是不必要的。加载50 KB+（整个库）与几行JS相比有什么好处呢？ - user1385191

当然，您是完全正确的，这就是为什么我在问他是否正在使用jQuery，因为如果是这样，只需添加插件可能是个好主意！ - Arthur Neves

所以没有JS是不可能的吗？我找到了像这样的简单解决方案http://unstoppablerobotninja.com/search/2b573b893776d794f0a31bf578100721/，但是我无法成功地将其完全实现在我的模板中。 - depi

Answer 6

起初，我使用以下的html/css代码：

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

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

然后我像这样将<div>添加了class="img":

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

一切开始正常运行。

- Rin

Answer 7

只需使用此代码。大多数人忘记指定最大宽度为图像的最大宽度。

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

- Daniel Nyamasyo

Answer 8

你可以使用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悬停特效转换、变形和动画

- ShahRokh

Answer 9

尝试一下

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

只有在显示为块级元素和内联块级元素时才有效，这对于弹性项目没有影响，我刚刚花了很长时间才发现。

- Ryan Stone