当浏览器宽度/高度发生变化时，如何使用CSS动态调整图像大小？-Java 学习之路

我想知道如何使图像与浏览器窗口一起调整大小，here是我到目前为止所做的（或下载the whole site in a ZIP） .

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

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

关于如何使这更加防弹的任何想法？（如果需要JavaScript，我也可以使用它，但CSS更可取 . ）

7 回答

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
回复于 2024-04-29T05:31:39+08:00
6
这个 can 用纯CSS完成，甚至不需要媒体查询 .

要使图像灵活，只需添加max-width：100％和height：auto . Image max-width：100％和height：auto在IE7中工作，但不在IE8中（是的，另一个奇怪的IE bug） . 要解决此问题，您需要为IE8添加宽度：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 example here . 无需JavaScript . 适用于最新版本的Chrome，Firefox和IE（我已经测试过） .
回复于 2024-04-29T05:31:39+08:00
3
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％ .
回复于 2024-04-29T05:31:39+08:00
7
将resize属性设置为两者 . 然后你可以像这样改变宽度和高度：
```
.classname img{
  resize: both;
  width:50px;
  height:25px;
}
```
回复于 2024-04-29T05:31:39+08:00
164
你在使用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>
```
回复于 2024-04-29T05:31:39+08:00
12
您可以使用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;
}
```
Further Reading ：
- CSS3 2D Transforms
- CSS3 Hover Effect Transitions, Transformations, Animations
回复于 2024-04-29T05:31:39+08:00
5
最初，我使用以下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>
```
一切都开始好起来了 .
回复于 2024-04-29T05:31:39+08:00

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

7 回答

2018解决方案：

相关问题