Bootstrap 设置高度和宽度时，图像平移出模态主体

ni65a41a 于 2023-03-06 发布在 Bootstrap

关注(0)|答案(4)|浏览(154)

我正在使用模态对话框显示照片库在我的应用程序中的单个图像，

<div class="modal fade" id="example{{$index}}" role="dialog">
   .....
   <div class="modal-body">    
     <img ng-src="../Files/Photos/{{photo_item.link}}" width="565" height="370" />
   </div>
   .....
</div>

现在图像具有width=“565”和height=“370”，并且不会从modal-dialog边界退出，但当我更改宽度和高度属性值时：

<div class="modal-body">
   <img ng-src="../Files/Photos/{{photo_item.link}}" width="900" height="700" />
</div>

可能有人知道我如何解决这个问题，或者我可以改变bootstrap.css文件中的值？谢谢你的回答！

twitter-bootstrap

来源：https://stackoverflow.com/questions/38860389/image-pans-out-of-the-modal-body-when-height-and-width-is-set

4条答案

按热度按时间

u59ebvdq1#

当你想要一个调整到包含对象宽度的图像时，使用"img-responsive"类。
如果您想要调整到高度的图像，请使用
.图像-响应-HT

{
  display: block;
  width: auto;
  max-height: 100%
}

注意：删除你在图像标签中提到的宽度和高度图像调整自身w.r. t容器
享受：）

赞(0）回复(0）举报 2023-03-06

pengsaosao2#

删除宽度和高度，并设置为100%（两者）。然后图像将留在模态框。
玩得开心。

赞(0）回复(0）举报 2023-03-06

cbjzeqam3#

不确定这是否是您正在寻找的，但如果您希望模态更大，您可以用途：

<div class="modal modal-lg">
     <div class="modal-content">
          <div class="modal-body">
             <img ng-src="../Files/Photos/{{photo_item.link}}"/>   
          </div> 
     </div>
</div>

赞(0）回复(0）举报 2023-03-06

8gsdolmq4#

要解决此问题，请添加bootstrap的img-fluid类并删除宽度和高度的其他属性。
代码看起来像这样

<div class="modal-body">
   <img ng-src="../Files/Photos/{{photo_item.link}}" class="img-fluid" />
</div>

赞(0）回复(0）举报 2023-03-06

我来回答

Bootstrap 设置高度和宽度时，图像平移出模态主体

4条答案

相关问题

热门标签

最新问答