Bootstrap 在模式窗口内调整图像大小

zxlwwiss  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(6)|浏览(256)

我已经在我的web应用程序中创建了一个支付页面的模态,并希望显示支付提供商的品牌;条纹。
默认情况下,图像是1950 x927,我可以使用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>
bfrts1fy

bfrts1fy1#

Bootstrap 3中的图像可以通过添加.img-responsive类而变得响应友好。
如需了解更多信息,请点击此处
试试这个:

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

trnvg8h32#

Bootstrap中的图像可以通过向img标记添加一个类来进行响应。
对于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') }}" >
5m1hhzi4

5m1hhzi43#

只需将类**.img-responsive**添加到您的图像,例如:

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

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

yvgpqqbh

yvgpqqbh4#

<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">
添加width: 100%;可使您的图像在div中正确匹配。
它在页面大小更改中非常有用,因为它可以根据div的宽度保持高度和宽度之间的比率

o4hqfura

o4hqfura5#

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

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

holgip5t6#

<img src="~/images/coming-soon.svg" height="310px" class="img-fluid" />

相关问题