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

时间:2012-11-27 14:47:03

标签: html css image resize

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

我的第一个问题:如果只使用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>

1 个答案:

答案 0 :(得分:2)

尝试寻找有关响应式用户界面的文章 - 这将为您提供更多有用的信息。 “autoscaling”可以通过下一个代码完成:

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

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