设置高度和宽度时，图像会从模态体中移出

Question

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

<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”，并且不会退出模态对话框的边框， 但是当我改变宽度和高度属性的值时：

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

可能有人知道我如何解决它，或者我可以在 bootstrap.css 文件中更改值？ 谢谢你的回答！

Answer 1

当您想要一个调整到包含对象宽度的图像时，请使用“img-responsive”类。

如果您想要调整高度的图像，请使用

.IMG响应-HT

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

注意：删除图像标记图像中提及的宽度和高度w.r.t容器

享受：）

Answer 2

不确定这是否是您要找的，但如果您希望模式更大，您可以使用：

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

Answer 3

删除宽度和高度并将其设置为100％（两者）。然后图像将保留在模态框内。

玩得开心。