无论图像高度如何，如何固定 div 高度

Posted 2023-03-06

【中文标题】无论图像高度如何，如何固定 div 高度

【英文标题】：How to have fixed div height irrespective of image height within it

【发布时间】：2020-06-02 12:16:20

【问题描述】：

我有一排三列。我想在每个列的 div 上都有一个具有相同高度的图像，而与每个 div 中的图像大小无关。

我希望图像在 div 中调整大小。但是我得到不同大小的 div，因为 myImage1.png、myImage2.png 和 myImage3.png 的图像大小不同。

发生这种情况是因为我在“bg”类中固定了填充。有人可以帮我解决这个问题吗？下面是我的 html 和 CSS 代码。

<div class="row IDE_container">
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="bg">
            <img src="myImage1.png" class="IDE_div" />
        </div>
    </div>

    <div class="col-lg-2 col-md-2 col-sm-2">
        <div class="circle_bg circle_bg_sm">
            <img src="myImage2.png" class="IDE_div" />
        </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="circle_bg">
            <img src="myImage3.png" class="IDE_div" />
        </div>
    </div>
</div>

.bg
    background-color: #ededed;
    border-radius: 100%;
    text-align: center;
    padding: 35% 5%;
    width: max-content;
    max-width: 100%;
    box-shadow: 0 0 3px 1px #DDD;


.IDE_div 
display: inline-block;
position: relative;
width: 100%; 
height: 100%;


.IDE_container 
    display: flex;
    align-items: baseline;
  

【问题讨论】：

您正尝试在 img 元素上使用 pseudo-elements。那是不可能的。此外，.IDE_div 类对于添加到图像上的类来说不是一个好名字:)

@MihaiT 更新了我的代码，没有伪元素。

【参考方案1】：

您需要在包含图像的 div 上设置高度或最大高度，否则它们将适应其内容（图像）的高度。由于您已将图像设置为 100% 的宽度和高度，并且没有限制其父级，因此它们将根据原始图像大小尽可能大。

所以，例如：

.IDE_container 
  display: flex;
  align-items: baseline;

  div.col-3 

    div 
      height: 200px;

      .IDE_div 
        display: inline-block;
        position: relative;
        width: 100%;
        height: 100%;

        &::before 
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: var(--val);
          padding-bottom: var(--val);
          transform: translate(-50%, -50%);
          z-index: -1;
          border-radius: 50%;
        
      
    
  

您可以为所有容器赋予相同的类（例如，固定高度-bg）以更轻松地设置它们的样式。

另请注意：您不需要为不同的屏幕尺寸为您的列指定单独的类，因为它们始终占据相同的比例。所以，你可以使用

 <div class="col-3">
        <div class="circle_bg">
            <img src="myImage3.png" class="IDE_div" />
        </div>
    </div>

编辑添加：如果您希望图像保持其比例，您需要将您的 css 更改为如下所示：

img 
  height: 100%; /* height of the parent container if specified, or of the image itself */
  width: auto; /* will maintain the proportions of the image */

您还可以将这些值切换为 height: auto;宽度：100%；如果您希望图像占据整个宽度。

【讨论】：

这没有帮助。它将所有图像放大到 200 像素。这不是要求。我想保持每个图像的比例。请帮忙。

对，那是因为我把任意数量的 200px 作为高度。对不起，我没有说清楚。您可以添加任何您想要的号码。如果你想让图像保持它们的比例，你可以这样工作：img height: 100%;宽度：自动； （或相反）。但是如果你不限制它们的父容器的高度，它们就不会是“偶数”。如果您只希望父容器具有相同的高度而不管图像大小，您可以 - 好吧 - 在 css 中给它们任何您想要的高度。

【参考方案2】：

对于各种图片，可以使用object-fit属性。

像这样添加 CSS：

.IDE_div
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */


<div class="col-3">
    <div class="circle_bg">
        <img src="myImage3.png" class="IDE_div" />
    </div>
</div>

您将在此处找到有关object-fit 和object-position 的详细信息：https://css-tricks.com/on-object-fit-and-object-position/