如何在css中动态调整图像大小？ [英] How to dynamically resize image in css?

问题描述

我有一个简单的html + css页面上有3张图片。我试图使页面调整大小根据浏览器窗口的大小。现在，我有一个div中的3个图像，其高度设置为周围容器的百分比，图像设置为height：100％和width：auto。现在，如果你调整整个窗口的大小工作正常 - 但如果你只改变宽度，他们不会调整大小当然，因为高度没有改变，他们最终被压下的页面是真的丑陋。 / p>

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

第二个问题：如果不可能，我如何至少停止他们从什么时候开始？我试图使溢出隐藏或滚动，但他们仍然碰到，然后切断你必须垂直滚动。

以下是实际网页的连结： http：// carissalyn.com/Landing.html （是的，我意识到图像负载缓慢，我会压缩他们的生活之前）​​。让我知道，如果你需要任何其他信息。

这里是相关的css（img容器是在内部的fadingtext里面）：

 code> 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.jpgalt =portraitclass =border>< / a> ; 
< a href =class =imghover>< img src =images / DSC_2280-Edit-Edit-Final.jpgalt =portraitclass =border> / a> 
< a href =class =imghover>< img src =images / DSC_2685.jpgalt =blogclass =border> < / a> 
 
< / div> 
< / div> 
  

解决方案

尝试寻找有关ResponsiveUI的文章 - 你很有用的信息。
autoscaling可以使用下一个代码：

 < div class =wrapper> 
< img src =img.png> 
< / div> 
 
 .wrapper img {
 width：100％; 
 max-width：100％
 height：100％; 
} 
  

I have a simple html + css page that has 3 images on it. I'm trying to make the page resize depending on the size of the browser window. Right now, I have the 3 images in a div that is set to a height as a percentage of the surrounding containers, and the images are set to height:100% and width:auto. now, that works fine if you resize the entire window- but if you only change the width, they won't resize of course since the height didn't change, and they end up getting pushed down the page which is really ugly.

my first question: is there a good way to make the images resize no matter if you change the height OR width of the browser using just html/css? If not, should I be using jquery and if so can you point me to a good resource?

Second question: if it's not possible, how do I at least stop them from getting bumped down a line? I tried making the overflow hidden or scrolled, but they still get bumped, then either cut off your you have to scroll vertically.

Here's a link to the live page: http://carissalyn.com/Landing.html (yes I realize the images load slowly I'll compress them before it's live). Let me know if you need any other info.

Here's the relevant css (img container is inside fadingtext which is inside body):

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

And here's the relevant html to clarify that there are 3 images:

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

解决方案

Try to look for articles about ResponsiveUI - that will give you much usefull info. "autoscaling" could be done with next code:

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

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

这篇关于如何在css中动态调整图像大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！