javascript - 使用CSS在HTML中缩放图像

我正在尝试创建一个可以调整为最现代分辨率的HTML页面，我在所有div容器中都使用了％，它们的缩放比例很好，但是这些容器中的图像却保持不变。

我不希望图像失去长宽比，但需要调整它们的大小以适合容器。我的示例在比例为4：3的屏幕上工作正常，但在宽屏上图像被剪切掉了。我正在使用的图片宽213px x高300px。如果我必须使用js来解决，那就可以了。

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
   <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>

   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
</div>

最佳答案

我想我有关于保留HTML长宽比：
HTML：

CSS：

<div id="container">                      <!--base wrapper-->
    <div id="vertical"></div>             <!--flexible vertical component-->
    <div id="ratioElement">content</div>  <!--fit to wrapper element-->
</div>

关于javascript - 使用CSS在HTML中缩放图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10594224/

html

javascript - 使用CSS在HTML中缩放图像