Question

我正在尝试创建一个可以根据大多数现代分辨率调整大小的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>

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

Answer 2

如果要连续使用1张图像，则应编写如下代码。

<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; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>

Answer 3

您可以使用JQuery Resizable： JQuery UI Resizable $（选择器）.resizable（...）; 有多个例子。

Answer 4

检查这个

<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:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
  <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>

Answer 5

从第一行移除高度....

Answer 6

我自己设法解决了这个问题，我给容器div一个高度和宽度，然后下面的所有其他div和图像只得到一个高度，这使得屏幕尺寸动态，我不得不使用display：-moz-inline-阻止将图像置于容器div的中心。检查http://jsfiddle.net/mb5T4/2/将结果屏幕的大小调整为典型比例（4：3,5：4,16：9），并在div中调整所有图像的大小。

使用CSS在HTML中缩放图像

6 个答案: