0

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

6 回答 6

1

我想我有一篇关于保留 HTML 纵横比的帖子，试试看：

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;
}
于 2012-05-15T04:48:42.953 回答
0

如果您想连续使用 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>
于 2012-05-15T04:51:32.107 回答
0

您可以使用 JQuery Resiable： JQuery UI Resizable

$(选择器).resizable(...);

有多个例子。

于 2012-05-15T05:26:52.043 回答
0

检查这个

<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>
于 2012-05-15T07:17:41.380 回答
0

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

于 2012-05-15T07:43:49.217 回答
0

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

于 2012-05-16T04:44:42.473 回答