图片如何在高度上不溢出

Question

我想让图像适合父级 div，但是，在某些屏幕尺寸上，图像在高度轴上溢出。

正常大小的图片没问题，但对于大图片，比如 15000 x 10800 的图片，图片仍然尊重父级宽度，但超过了高度

我可以将 max-height: -webkit-fill-available; 与 chrome 一起使用，但 firefox 在 max-height

上不支持 -moz-available

我正在使用 bootstrap 4，但我做了一些 CSS 修改。

截图：

HTML:

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title" id="imageZoomModalTitle">Galeria</h5>
        <button type="button" class="custon-close-button-color close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <img class="img-modal" src="xyz" >
    </div>
</div>

CSS:

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px;
  border-radius: 0;
  box-shadow: none;
}

.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.img-modal {
  max-width: 100%;
  height: auto;
}

编辑这是我要搜索的结果。该图像在 .img-modal 上使用 max-height: -webkit-fill-available;

Answer 1

变体 1. 使用 overflow 属性:

隐藏图像的其余部分

.modal-body {
    overflow: hidden;
}

变体 2：将图像作为模态主体的背景并将 background-size 属性设置为 cover 或 contain。

这些解决方案是否适合您？

更新。 Bootstrap 4模态大图背景.

https://codepen.io/glebkema/pen/wvKNJPW

.custom-modal .modal-dialog {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 max-width: none;
 margin: 0;
}

.custom-modal .modal-content {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 border: 2px;
 border-radius: 0;
 box-shadow: none;
}

.custom-modal .modal-body {
 background: url("http://glebkema.ru/images/glebkema_iphone_9623_w1000.jpg") center / contain no-repeat;
}

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Launch demo modal
</button>

<!-- Modal -->
<div class="modal custom-modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <h5 class="modal-title" id="imageZoomModalTitle">Galeria</h5>
    <button type="button" class="custon-close-button-color close" data-dismiss="modal" aria-label="Close">
     <span aria-hidden="true">&times;</span>
    </button>
   </div>
   <div class="modal-body"></div>
  </div>
 </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

图片如何在高度上不溢出

How can the image not overflow on the height

html

css

bootstrap-modal

responsive