如何缩小 IMG 周围的 DIV？

2023-12-19

向所有 CSS 大师提出一个简单的（有人可能会想！）问题：我想缩小 DIVsnugly围绕 IMG。 IMG 是 600 x 800，我需要它小得多。所以我去{高度：100％； width: auto;} 并通过包装器 DIV 约束高度。但是，为了维持（我不知道的）AR，我无法修复 DIV 上的宽度。我尝试将包装 DIV 设置为“display：inline-block”或“float：left”或“position：absolute”或... - 无论如何：大多数浏览器都会将该 DIV 拉伸 800px 宽 - 整个 DIV 的原始宽度-size IMG - 所以它看起来像这样：

[[IMG]........................................]

奇怪的是，我可以向 DIV 添加一些文本（只是为了测试），并且该文本实际上会出现在缩放后的 IMG 旁边：

[[IMG]你好世界............]

这里有谁知道为什么 IMG 的原始尺寸很重要（对于宽度尺寸，它不会影响高度）？我可以做什么来缩小 DIV？

感谢您的关注。

编辑：为了测试 Pär Wieslander 的想法，我写了一个小测试床，应该有助于澄清我的想法：

<style type="text/css">  
  html, body {  
     height: 100%;  
  }  
  #dialog {  
     background: green;  
     height: 50%;  
     position: relative;  
  }  
  #frame {  
     border: 2px solid black;  
     display: inline-block;  
     height: 100%;  
     position: absolute;  
  }  
  #img {  
     height: 100%;  
     width: auto;  
  }  
</style>  

<body>  
  <div id="dialog">  
     <div id="frame">  
        <img id='img' src='...' />  
     </div>  
  </div>  
</body>

随便选一个large您选择的 IMG。您应该会发现周围有一个莫名其妙的宽框，并且图像在高度上挤到了绿色地毯上。

如果将图像的宽度或高度指定为百分比，该百分比是根据父块的大小按比例计算的。所以指定width: 50%图像上的并不意味着原始图像宽度的 50%——它意味着父块宽度的 50%。高度也是如此。因此，只要您将宽度或高度指定为百分比，图像周围总会有额外的空间。

解决方案很简单——以像素、em 或除百分比以外的任何其他单位指定尺寸：

HTML

<div class="wrapper">
  <img class="small" src="myimage.jpg">
</div>

CSS

img.small {
  width: 150px;    /* or whatever you like */
  display: block;  /* to avoid empty space below the image */
}

div.wrapper {
  display: inline-block;
  border: 1px solid #000;
}

Edit:根据您的评论和更新的帖子，我知道您真正想要做的是设置周围 div 的宽度并使图像填充该 div。这是一个执行此操作的示例：

HTML

<div class="wrapper big">
  <img src="myimage.jpg">
</div>

<div class="wrapper small">
  <img src="myimage.jpg">
</div>

CSS

img {
  display: block;
  width: 100%;
}

.wrapper {
  margin-top: 1em;
  border: 1px solid #000;
}

.big {
  width: 600px;
}

.small {
  width: 300px;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)