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

Posted 2023-03-06

【中文标题】如何在css中动态调整图像大小？

【英文标题】：How to dynamically resize image in css?

【发布时间】：2012-11-15 05:20:58

【问题描述】：

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

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

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

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

这是相关的css（img容器在fadingtext里面，在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;

这里是相关的 html 来说明有 3 张图片：

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

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

</div>
</div>

【参考方案1】：

尝试查找有关 ResponsiveUI 的文章 - 这将为您提供很多有用的信息。 “自动缩放”可以用下一个代码来完成：

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

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

【讨论】：

这是否适用于多张照片？如果有多个，我不想将照片宽度设为 100%……对吗？我会查找 ResponsiveUI 谢谢。

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