我已经在我的web应用程序中创建了一个支付页面的模态,并希望显示支付提供商的品牌;条纹。
默认情况下,图像是1950 x927,我可以使用style
手动更改,但是这并不能使图像大小真正动态;即它可能在桌面上看起来很好,但仍然扩展到移动的上的模态。
台式机:
移动的:
我怎样才能让图像大小与模态响应加载?
下面是我的页面上的代码:
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
6条答案
按热度按时间bfrts1fy1#
Bootstrap 3中的图像可以通过添加.img-responsive类而变得响应友好。
如需了解更多信息,请点击此处
试试这个:
trnvg8h32#
Bootstrap中的图像可以通过向img标记添加一个类来进行响应。
对于Bootstrap 3:使用
.img-responsive
对于Bootstrap 4:使用
img-fluid
,因为img-responsive
在v4中不再存在。5m1hhzi43#
只需将类**.img-responsive**添加到您的图像,例如:
查看此页面以了解有关响应图像和视频的更多信息-http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php
yvgpqqbh4#
<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">
添加
width: 100%;
可使您的图像在div
中正确匹配。它在页面大小更改中非常有用,因为它可以根据
div
的宽度保持高度和宽度之间的比率o4hqfura5#
您可以尝试在图像标签上设置最大宽度。
holgip5t6#