Question

我正在尝试在我已声明的div中拟合不同大小的图像。我正在使用Bootstrap Modal。在模态体中，我添加了从后端获取图像的代码。

我已将这些图像放在div中，并尝试在div中调整这些图像。

我正面临的问题

当我用inspect element检查时，所有div的宽度都相同，但div的高度与图像的高度成正比。我不知道为什么会发生这种情况（当我做inspect element时。如果我得到一个div的axb，那么a的值对于所有div是相同的，但b的值取决于图像，并且对于所有div是不同的）

HTML：

<div class="modal-body">
        {% for file in brands %}
        {% load static %}
            <div class="outerdiv"><img class="img-fl" src="{% get_static_prefix %}images/brands/{{file}}" alt=""></div>
        {% endfor %}
      </div>

CSS：

.modal-body {
    width: 100%;
    height: 100%;

}

.outerdiv {
  height: 30%;
  width: 30%;
  display:inline-block;
}



.img-fl{

    max-width: 100%;
    max-height: 100%;

}

整个模态代码

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Add More Brands</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="removeclass()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% for file in brands %}
        {% load static %}
            <div class="outerdiv"><img class="img-fl" src="{% get_static_prefix %}images/brands/{{file}}" alt=""></div>
        {% endfor %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="removeclass()">Close</button>
        <button id="add-image" type="button" class="btn btn-primary">Add Brand</button>
      </div>
    </div>
  </div>
</div>

Answer 1

建议不要缩小图像高度，因为它会改变图像的纵横比并导致糟糕的用户体验，但是如果你想在div中使用图像，那么你可以选择背景图片属性background-size: auto;。

Answer 2

如果您希望父div相对于模态div具有给定高度，则必须向其添加relative属性，甚至可以使用min-height和max-height来使您的需求更加灵活。另请注意，modal div's height必须设置为absolute value而不是relative value，因为它未声明为relative。你写了height: 100%， 100％的什么？

.modal-body {
    width: 100%;
    /**
    display: relative; use this one if the parent element to the modal body
    has an absolute height set on it.
    height: 100%;
    */
    height: 500px; /**absolute value for height, if not relative to a parent div*/
}

.outerdiv {
  min-height: 30%;
  width: 30%;
  /**
  max-height: 90%;
  */
  display:inline-block;
  position: relative;
}



.img-fl{

    max-width: 100%;
    max-height: 100%;
}

Answer 3

You can try this to your CSS



    .outerdiv{height:30%;
width:30%;}

    .img-f1{height:100%; 
    width:100%;
    Object-fit: cover;
    }

或者您可以参考更多对象拟合值，例如contains，fill。

使用CSS在div中拟合图像

3 个答案: