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

Posted 2023-03-06

【中文标题】在模态窗口内调整图像大小

【英文标题】：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 类对其进行缩放是不好的做法。您应该首先使用图像编辑器软件调整图像大小。但这取决于你。

【参考方案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" >

查看此页面以了解有关响应式图像和视频的更多信息 - 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') " >