如何在html修改图片大小,HTML – 如何在CSS中动态调整图像大小？

我有一个简单的html css页面,上面有3个图像.我正在尝试根据浏览器窗口的大小调整页面大小.现在,我在div中设置了3个图像,高度设置为周围容器的百分比,图像设置为高度：100％和宽度：自动.现在,如果您调整整个窗口的大小,那可以正常工作 – 但是如果您只更改宽度,它们当然不会调整大小,因为高度没有变化,并且它们最终会被推到页面上,这真的很难看.

我的第一个问题：如果只使用html / css更改浏览器的高度或宽度,是否有一种很好的方法可以调整图像大小？如果没有,我应该使用jquery,如果是这样,你能指出一个好的资源吗？

第二个问题：如果不可能,我如何至少阻止他们撞到一条线？我试图隐藏或滚动溢出,但它们仍然被碰撞,然后切断你必须垂直滚动.

这是实时页面的链接：http://carissalyn.com/Landing.html(是的,我意识到图像加载缓慢,我会在它们生效前压缩它们).如果您需要任何其他信息,请告诉我.

这是相关的css(img容器位于fadingtext里面,它位于体内)：

body,html{

height:100%;

margin:0; padding:0;

}

#imgcontainer{

height: 100%;

width: 90%;

display: inline-block;

}

img {

max-height:90%;

width: auto;

}

#fading_text {

text-align: center;

height: 60%;

-webkit-animation: fade-text 20s 1;

-moz-animation: fade-text 20s 1;

}

这里有相关的HTML来澄清有3张图片：