适合模态的div中的图像

问题描述 投票:0回答:1

我有一个小问题,我正在尝试将我的图像适合我的模态div中。

这是我现在拥有的,我希望它就像我用红色绘制

What i have, in red is what I really want

原始图像是这个,所以您有一个理想的实际尺寸

Real image

我现在的代码就是这样。

模态

<div class="modal-header">
  <button type="button" class="close" onclick="hideModal()">&times;</button>
</div>

<!-- Modal Body -->
<div class="modal-body">
  <img class="modal-img" src="/images" >
</div>

** img **

<img style='height: 100%; width: 100%; object-fit: contain' onclick="showModal(this)" src="{$product.image}"  alt="" class="img-responsive">
javascript html css image bootstrap-modal
1个回答
0
投票

相对于图片的父div给出位置,它将适合模式。 this link中的一些工作示例

<div class="image-container">
  <img class="modal-img" src="https://i.stack.imgur.com/bgvRi.png" >
</div>

.image-container {
   position: relative;
 }

.image-container img {
  width: 100%;
  height: auto; // or 100%
}
© www.soinside.com 2019 - 2024. All rights reserved.