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

我有它有3个图像的简单的HTML + CSS页面。我试图根据浏览器窗口的大小来调整页面的大小。现在，我有被设置为一个高度，周围的容器的百分比div的，3幅图像，并将图像设置为height：100％，宽度：汽车。现在，如果你调整整个窗口 - 工作正常，但如果你只改变宽度，他们不会调整，当然由于高度没有改变，他们最终得到推下降，这是十分可怕的页面。如何在css中动态调整图像大小？

我的第一个问题：有没有做，如果你改变仅使用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张图片：

<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>

来源

2012-11-27 user1754602

尝试一下关于ResponsiveUI的文章 - 这会给你很多有用的信息。可以使用下一个代码完成“自动缩放”：

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

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

来源

2012-11-27 14:58:42

这是否可以使用多张照片？如果有多个对象，我不想将宽度设置为100％...对吗？我会查找ResponsiveUI谢谢。 – user1754602

有没有其他想法？我查看了ResponsiveUI，虽然我认为这是我要去的方向，但我不确定它是否解决了我的问题。即使在定义的尺寸内，如果宽度发生变化，而不是我遇到这个问题的高度。 – user1754602

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

回答

相关问题