使用 CSS 在 HTML 中缩放图像

Scaling images in HTML using CSS

本文关键字：缩放 图像 HTML CSS 使用      更新时间：2023-09-26

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

<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;
}
如果你想

在一行中使用 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>

您可以使用 JQuery Resiable ：JQuery UI 可调整大小

$（selector）.ressizeable（...）;

有很多例子。

检查这个

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

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

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

相关文章：