大佬教程收集整理的这篇文章主要介绍了用 img 替换 bootstrap-5 svg 占位符，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试从 bootstrap 5 轮播主页复制样式。除了“featurette-image”类之外的所有内容都做得很好，并将占位符 SVG 替换为具有相同作用的 img。现在，我发现在选择格式（70vh...修复 500px）中复制很容易，但是当我更改视图屏幕或看起来像 SVG 占位符时，它们都没有反应良好。
原始代码如下。我只是不知道如何将图像复制到 500x500 矩形 SVG 占位符，这让我很烦！
@H_197_10@<div class="row featurette"> <div class="col-md-7"> <h2 class="featurette-heading">And lastly,this one. <span class="text-muted">checkmate.</span></h2> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ID ligula porta felis euismod semper. Praesent commodo cursus magna,vel scelerisque nisl consectetur. Fusce dAPIbus,tellus ac cursus commodo.</p> </div> <div class="col-md-5"> <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluID mx-auto" ID="test" wIDth="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMIDymID slice" focusable="false"><title>Placeholder</title><rect wIDth="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text> </svg> </div> </div>
放置一个 img 并为其分配类“featurette-image”总是被“img-fluID”类覆盖，并以一种奇怪的方式将图像卷起。
@H_197_10@<div class="row featurette"> <div class="col-md-7 order-md-2"> <h2 class="featurette-heading">Oh yeah,it’s that good. <span class="text-muted">See for yourself.</span></h2> <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ID ligula porta felis euismod semper. Praesent commodo cursus magna,tellus ac cursus commodo.</p> </div> <div class="col-md-5 order-md-1"> <img src="https://cdn.pixabay.com/photo/2012/11/28/13/53/osprey-67786_1280.jpg" class="feaurette-image img-fluID mx-auto"> </div> </div>
任何和所有帮助将不胜感激！
我之前没有回复过其中一个，我不知道这是否是最优雅的解决方案，但这对我有用，因为我保留了 SVG 语句中我需要的元素，并将这些元素输入到 img 函数中，如下所示。
@H_197_10@<img src="FILEPATH" class="featurette-image img-fluid mx-auto" alt="Responsive image" width="500" height="500" preserveAspectRatio="xMidymid slice" focusable="false" >
这应该是替换 SVG 语句并为您的图像放置正确文件路径的情况。我也在轮播主页上对此进行了测试。
,您从未解释过 @H_197_10@featurette-image 是什么。
使用 @H_197_10@img-fluid 将始终使其充满父级的宽度。如果 @H_197_10@featurette-image 设置特定高度，图像将失去其纵横比。
https://codeply.com/p/JgrBBiAmCV
以上是大佬教程为你收集整理的用 img 替换 bootstrap-5 svg 占位符全部内容，希望文章能够帮你解决用 img 替换 bootstrap-5 svg 占位符所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。