强制 img 元素填充容器的高度和宽度

Posted 2023-02-25

【中文标题】强制 img 元素填充容器的高度和宽度

【英文标题】：Force img Element to Fill Container Height and Width

【发布时间】：2014-02-10 18:58:58

【问题描述】：

我目前正在构建这个画廊，我正在努力研究如何让我的图像填充它们的容器。

我不介意它们是否被裁剪了一点，我只是希望它们填充其父元素 .thumb 的全部高度和宽度。

我的 HMTL 如下所示：

<ul class="thumbs">
   <li class="thumb">
   <a href="#"><img src="/img.jpg"></a>
   </li>
   ...
</ul>

我的 CSS 是这样的：

.thumbs .thumb 
  background: red;
  height: 33.5294118%;
  float: left;
  width: 50%;
  overflow: hidden;
  z-index: 0;

我在这里设置了一个演示：http://codepen.io/realph/pen/hjvBG

如果有人能指出我正确的方向，我将不胜感激。

提前致谢！

【参考方案1】：

尝试将 .thumb a 添加到您的 .thumb img 定义中（因此 a 元素也是 100% 宽度） - 您可能还必须显示一个或两个 (a/img) 标签：block and height 100% as好吧

【参考方案2】：

您可以尝试向 img 元素添加一个类，例如：

<img src="/img.jpg" class="img-class">

还有 css。

.img-class 宽度:100%;高度：100%；