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

Question

我想知道如何使图像与浏览器窗口一起调整大小,这是我到目前为止所做的(或者以ZIP方式下载整个网站).

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

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

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

Answer 1

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

要使图像灵活,只需添加max-width:100%和height:auto.图像max-width:100%和height:auto工作在IE7,但不是在IE8(是的,另一个奇怪的IE错误).要解决此问题,您需要width:auto\9为IE8 添加.

来源: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 onresize事件中,每次像素更改(宽度或高度)都会触发,因此可能会出现性能问题.使用javascript的window.setTimeout()延迟图像大小调整几毫秒.

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

Answer 4

将resize属性设置为两者.然后你可以像这样改变宽度和高度:

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

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>