调整宽径比为4:3至16:9的图像大小，而不丢失css的响应行为
调整宽径比为4:3至16:9的图像大小，而不丢失css的响应行为
提问于 2022-09-11 21:10:52
假设我的图像(640x480)为4:3的纵横比：
显示它的代码是：
<img src="../static/images/image4-3.jpg" class="img-fluid" alt="">
我想要的是在16:9 (图像的实际纵横比，尺寸是640x360)：
很明显，做16/9=1.77777777778 => 640/1.77777777778 = 360。因此，如果为“高度:360 of”和“宽度: 100%”设置样式，它可以工作，但是，它没有响应性，有一种方法可以编辑图像的高度(非常简单)，并限制引导给出的响应行为？
顺便说一句，我对CSS非常陌生，所以这可能是个愚蠢的问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-11 22:17:02
由于Bootstrap有购买的帮助者将比率应用于您的元素，您可以使用那些内置的帮助，这将允许您有您想要的比率，同时保持事物的反应。为此：
在div
- apply
ratio ratio-16x9类中，
- 将您的图像封装到该
div中。这些类将使div成为响应映像的16/916/9img-fluid，这样它就可以很好地与其容器进行伸缩。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- note the "ratio ratio-16x9" classes on the parent div -->
<!-- resize the screen to see how the image nicely scales while maintaining the desired ratio -->
<!-- for demo purpose, am setting the width of the wrapper div to 75% so that the ratio effect can be easily seen -->
<div class="ratio ratio-16x9 w-75 m-auto">
<img src="https://i.stack.imgur.com/p4xRM.jpg" class="img-fluid">
</div>
在
Bootsrap 5 Ratio Helpers文档中了解更多关于BS5的信息。值得注意的是，有一种使用ratio规则应用aspect-ratio规则的本机方式，但后来的规则(在编写本报告时)仍然没有良好的浏览器支持。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73682673
复制相关文章
相似问题
腾讯云开发者
