在模态窗口内调整图像大小答案

【问题标题】：Resize image inside modal window在模态窗口内调整图像大小
【发布时间】：2017-02-12 12:25:05
【问题描述】：

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

默认情况下，图像为 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>

【问题讨论】：

您是否尝试将class="img-responsive" 添加到您的图像中并最终添加width="100%" 和height="auto"？此外，使用如此大的图像然后内联或使用 css 类对其进行缩放是不好的做法。您应该首先使用图像编辑器软件调整图像大小。但这取决于你。

标签： css twitter-bootstrap laravel bootstrap-modal

【解决方案1】：

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

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

【讨论】：

很有魅力！谢谢！我到处搜索解决方案，但从我运行的搜索中找不到任何东西。

【解决方案2】：

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

更多信息可以阅读here

试试这个：

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

【讨论】：

这也有效。我什至没有意识到 Bootstrap 有一个 img-responsive 类。我喜欢这种方法，因为它不需要手动设置style。
它也适用于带有class="img-fluid"的Bootstrap 4

【解决方案3】：

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

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

查看此页面以了解有关响应式图像和视频的更多信息 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php

【讨论】：

【解决方案4】：

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

添加width: 100%; 将您的图像正确地放入div 中。

它在页面大小变化时非常有用，因为它保持高度和宽度之间的比例根据div的宽度而变化

【讨论】：

【解决方案5】：

Bootstrap 中的图像可以通过在 img 标签中添加一个类来实现响应式。

对于引导程序 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') }}" >

【讨论】：