laravel 在模态窗口内调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39850568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize image inside modal window
提问by James
I've created a modal for a payments page inside my web application and want to show the branding of the payment provider; Stripe.
我在我的 Web 应用程序中为支付页面创建了一个模式，并希望显示支付提供商的品牌；条纹。
By default the image is 1950x927. I can manually change this using stylehowever this doesn't make the image size truly dynamic; i.e it might look fine on desktop but still extends over the modal on mobile.
默认情况下，图像为 1950x927。我可以使用手动更改它，style但这不会使图像大小真正动态；即它在桌面上可能看起来不错，但在移动设备上仍然扩展到模态。
Desktop:
桌面：
Mobile:
移动的：
How can I get the image size to load responsively with the modal?
如何使用模态响应加载图像大小？
Below is the code on my page:
下面是我页面上的代码：
<!-- 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>
回答by Jyoti Pathania
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.
通过添加 .img-responsive 类，Bootstrap 3 中的图像可以变得响应友好。
For more information you can read here
有关更多信息，您可以在这里阅读
Try this:
尝试这个：
<img class="img-responsive" src="{{ asset('img/stripe.png') }}" style="max-height:250px;">
回答by Alex
Just add the class .img-responsiveto your image, like:
只需将.img-responsive类添加到您的图像中，例如：
<img src="{{ asset('img/stripe.png') }}" class="img-responsive" alt="">
Checkout this page to learn more about responsive images and video - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php
查看此页面以了解有关响应式图像和视频的更多信息 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-images.php
回答by Rick
You can try to set a max width on the image tag.
您可以尝试在图像标签上设置最大宽度。
<img src="{{ asset('img/stripe.png') }}" style="height:250px;max-width: 100%;">
回答by Advaith
<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">
<img src="{{ asset('img/stripe.png') }}" style="height:250px; width: 100%;">
Adding width: 100%;fits your image inside the divcorrectly.
添加width: 100%;适合您的图像内部div正确。
It is very useful in page size change as it keep the ratio between height and width changed according to the width of div
它在更改页面大小时非常有用，因为它可以根据页面的宽度保持高度和宽度之间的比例变化 div
回答by NSR
Images in Bootstrap can be made responsive by just adding a class to img tag.
只需向 img 标签添加一个类，即可使 Bootstrap 中的图像具有响应性。
For Bootstrap 3: Use .img-responsive
对于 Bootstrap 3：使用 .img-responsive
<img class="img-resposive" src="{{ asset('img/stripe.png') }}" >
For Bootstrap 4: Use img-fluidas the img-responsivedoesn't exist anymore in v4.
对于 Bootstrap 4：使用，img-fluid因为img-responsivev4 中不再存在。
<img class="img-fluid" src="{{ asset('img/stripe.png') }}" >
