当浏览器宽度发生变化时自动调整 div 中的两个图像的大小答案

【问题标题】：Auto resize two images in a div when browser width changes当浏览器宽度发生变化时自动调整 div 中的两个图像的大小
【发布时间】：2012-06-24 01:21:49
【问题描述】：

我查看了许多不同人对这个问题的答案，但他们只解释了一张图片。我在标题中放置的两个图像有问题，当我调整浏览器的大小时，我希望它们随之缩小，这样它们就不会取代我的整个网站。

我将它托管在 Dropbox 中，因此您可以看到我的问题：https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html

我还遇到的另一个问题是从屏幕底部取消附加页脚并将其放在正文下方，因此用户必须向下滚动。 p.s 几个月前我将页脚附加到底部，但我忘记了如何撤消它。

抱歉，代码乱七八糟

提前致谢

阿兰，16 岁

【问题讨论】：

【解决方案1】：

我会这样做。首先，使用 CSS 设置每个图像的样式，使其具有 width:100% 和 height:auto。这使他们响应容器的大小。丢失img 标签中的width 和height 属性——我什至不确定它们是否有效。

现在聪明的部分来了。你的图片是 550px 和 298px 宽，大约是 65%:35% 的比例。当头球在断裂前处于最窄点时，它的宽度大约与两者之和一样宽。所以给大图的容器max-width:65%，小图的容器divmax-width:35%。

这样，当浏览器窗口较小时，图像会相应地缩小 - 并且不会变得比窗口宽时所需的大。我在您的页面上尝试过，我认为它有效 - 看看它是否适合您。 :)

【讨论】：