我有一个小问题,我正在尝试将我的图像适合我的模态div中。
这是我现在拥有的,我希望它就像我用红色绘制
What i have, in red is what I really want
原始图像是这个,所以您有一个理想的实际尺寸
我现在的代码就是这样。
模态
<div class="modal-header">
<button type="button" class="close" onclick="hideModal()">×</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">
相对于图片的父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%
}