调整模态窗口

Question

我已经在我的网络应用程序中为付款页面创建了一个模式，并希望显示付款提供商的品牌;条纹。

默认情况下，图像为1950x927。我可以使用style手动更改此设置，但这并不能使图像尺寸真正动态;即它可能在桌面上看起来很好，但仍然可以在移动设备上延伸到模式。

桌面：

移动：

如何使用模态响应加载图像大小？

以下是我页面上的代码：

<!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">How can you know your payment is secure?</h4>
      </div>
      <div class="modal-body">
        <img src="{{ asset('img/stripe.png') }}" style="height:250px;">
        <p>Stripe has been audited by a PCI-certified auditor and is certified to <a href="http://www.visa.com/splisting/searchGrsp.do?companyNameCriteria=stripe" target="_blank">PCI Service Provider Level 1</a>. This is the most stringent level of certification available in the payments industry. To accomplish this, they make use of best-in-class security tools and practices to maintain a high level of security at Stripe.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

Answer 1

  

Bootstrap 3中的图像可以通过添加响应友好   .img-responsive类。

有关详细信息，请参阅here

试试这个：

<img class="img-responsive" src="{{ asset('img/stripe.png') }}" style="max-height:250px;">

Answer 2

只需在img标签中添加一个类，即可使Bootstrap中的图像具有响应性。

对于Bootstrap 3：使用.img-responsive

<img class="img-resposive" src="{{ asset('img/stripe.png') }}" >

对于Bootstrap 4：使用img-fluid，因为img-responsive在v4中已不存在。

<img class="img-fluid" src="{{ asset('img/stripe.png') }}" >

Answer 3

只需将 .img-responsive 类添加到您的图片中，例如：

<img src="{{ asset('img/stripe.png') }}" class="img-responsive" alt="">

查看此页面以了解有关响应式图片和视频的详情 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php

Answer 4

您可以尝试在图片标签上设置最大宽度。

EventQueue

Answer 5

<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">

添加width: 100%;会使您的图片正确适合div。

它在页面大小更改时非常有用，因为它保持高度和宽度之间的比率根据div

的宽度而变化