如何在CSS中动态调整图像大小？

我有一个简单的 html + css 页面，上面有 3 个图像。我试图根据浏览器窗口的大小调整页面大小。现在，我在一个 div 中有 3 个图像，其高度设置为周围容器的百分比，并且图像设置为 height:100% 和 width:auto。现在，如果您调整整个窗口的大小，效果很好 - 但如果您只更改宽度，它们当然不会调整大小，因为高度没有改变，并且它们最终会被推到页面下方，这非常难看。

我的第一个问题：无论您仅使用 html/css 更改浏览器的高度或宽度，有没有一种好的方法可以使图像调整大小？如果没有，我应该使用 jquery，如果是的话，你能给我指出一个好的资源吗？

第二个问题：如果不可能，我怎样才能至少阻止他们被撞到线上？我尝试使溢出隐藏或滚动，但它们仍然会被碰撞，然后要么切断你的你必须垂直滚动。

这是实时页面的链接：http://carissalyn.com/Landing.html http://carissalyn.com/Landing.html（是的，我意识到图像加载速度很慢，我会在发布之前对其进行压缩）。如果您需要任何其他信息，请告诉我。

这是相关的 css（img 容器位于 body 内的 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 个图像：

<div id="fading_text">
<div id="imgcontainer">

<a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"></a>
<a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border">  </a>

</div>
</div>

尝试查找有关响应式 UI 的文章 - 这将为您提供许多有用的信息。 “自动缩放”可以用下面的代码来完成：

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

    .wrapper img {
     width: 100%;
     max-width: 100%
     height: 100%;
    }