与CSS内拟合图像

Question

我正在尝试适合我声明的div中不同大小的图像。我正在使用Bootstrap模式。

我将这些图像放置在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为特定的高度，则必须向其添加 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;
    }

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