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

Question

我正在尝试创建一个可以调整大小以适应大多数现代分辨率的 HTML 页面，我对我所有的 div 容器都使用 % 并且它们缩放得很好但是我在这些容器中有图像并且它们保持不变尺寸。

我不希望图像丢失它们的宽高比，但我需要它们重新调整大小以适合容器。我的示例在 4:3 比例屏幕上运行良好，但在宽屏上图像被 chop 。我使用的图像是 213 像素宽 x 300 像素高。如果非要用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>

Answer 1

我想我有 a post关于保留 HTML 纵横比，try giving this a shot :

HTML:

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

CSS:

#container{
    position:relative;
    width:100%;
    float:left;
}

#vertical{
    margin-top:50%;     /* 2:1 ratio (#container width : #vertical height) */
}

#ratioElement{          
    position:absolute;  /*this would be the <img>*/
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#069;
}