Question

假设我有一个固定尺寸的div

<div class="cell" style="width:150px; height:150px"></div>

如果我希望图像不宽于div并且不高于div，但保持其原始宽高比我可以将max-height和max-width设置为100％

<div class="cell" style="width:150px; height:150px">  
    <img src="" style="max-height:100%; max-width:100%">
</div>

但是，在我的情况下，我希望将img包装在div中。原因是，我想在图像上放置一些元素，并将它们相对于图像定位：

<div class="cell" style="width:150px; height:150px">  
    <div class="image-button-wrapper" style="position:relative">
        <img src="" style="max-height:100%; max-width:100%">
        <button style="position:absolute; top:3px; right:3px"></button>
    </div>
</div>

然而，一旦我将图像包装在div中，它只会考虑max-width属性，而不是最大高度，所以图像（和包装器）在垂直方向上溢出单元格。

可能的解决方案：

我读到要使max-height工作，我必须明确设置父级的高度。但是我该怎么做呢，因为我希望它的尺寸与图像的尺寸相同？

在浏览器中玩游戏时，我意识到将包装器的宽度和高度设置为＆＃34; fit-content＆＃34;解决它。但这是非常罕见的价值。这是最简单的解决方案吗？

我添加了一个代码段，您可以在其中看到如何在max-height不是

的情况下遵循最大宽度

＆＃13;

    <div class="cell" style="width:150px; height:50px;border: 3px solid red">  
        <div class="image-wrapper" style="position:relative">
            <img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
            <button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
        </div>
   </div>

＆＃13;

我添加了预期的结果。唯一的区别是使包装的宽度和高度适合内容＆＃34;。

＆＃13;

    <div class="cell" style="width:150px; height:50px;border: 3px solid red">  
        <div class="image-wrapper" style="position:relative; width:fit-content; height:fit-content">
            <img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
            <button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
        </div>
   </div>

＆＃13;

Answer 1

您可以使用background-image：

.cell{
    background-image: url("https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

    <div class="cell" style="width:150px; height:50px;border: 3px solid red">  
        <div class="image-wrapper" style="position:relative">

      <button style="position:absolute; top:3px; right:3px; width: 10px; height:10px">
        </button>
   </div>

Answer 2

img{
  width: 100%;
  height: 100%;
}
.image-wrapper{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="cell" style="width:150px; height:50px;border: 3px solid red">  
        <div class="image-wrapper" style="position:relative;">
            <img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style>
            <button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
        </div>
   </div>

这是你想要的吗？

Answer 3

它可以通过多种方式解决，这取决于您的喜好。

您所做的已经是正确的，只需将height: 100%;添加到图片包装器中：

<div class="cell" style="width:150px; height:50px;border: 3px solid red">  
    <div class="image-wrapper" style="position:relative; height: 100%;">
        <img src="https://images.pexels.com/photos/62321/kitten-cat-fluffy-cat-cute-62321.jpeg?auto=compress&cs=tinysrgb&h=350" style="max-height:100%; max-width:100%">
        <button style="position:absolute; top:3px; right:3px; width: 10px; height:10px"></button>
    </div>
</div>

说明：图像包装器div的宽度为100％（默认情况下，因为div是块，块的默认宽度为100％），但没有特定的高度。当您将包装器的高度设置为100％时，它会考虑其父级的高度（单元格的高度），因此，图像将遵循其父级高度（图像包装器的高度）

如果有一个包装div，如何使img适合一个单元格

3 个答案: