将bootstrap-5 svg占位符替换为img

Question

我正在尝试从Bootstrap 5 carousel主页复制样式。除了"featurette-image“类之外，一切都做得很好，并将占位符SVG替换为以相同方式工作的IMG。现在，我发现在选择格式(SVG500px)中复制是很容易的，但是当我改变视图屏幕时，它们都不会有很好的反应，看起来也不像70vh...fixing占位符。

原始代码如下。我根本不知道如何复制500x500矩形SVG占位符的图像，它让我抓狂！

​

<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”类覆盖，并以一种奇怪的方式压缩图像。

​

<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, vel scelerisque nisl consectetur. Fusce dapibus, 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>

​

任何和所有的帮助都将不胜感激！

Answer 1

我以前没有回复过其中的一个，我不知道这是否是最优雅的解决方案，但这对我很有效，因为我保留了SVG语句中需要的元素，并将这些元素输入到img函数中，如下所示。

<img 
     src="FILEPATH" 
     class="featurette-image img-fluid mx-auto" 
     alt="Responsive image" 
     width="500" 
     height="500" 
     preserveAspectRatio="xMidYMid slice" 
     focusable="false"
    >

应该替换SVG语句并为您的图像放置正确的文件路径。我也在carousel主页上测试了这一点。

Answer 2

你从来没有解释过featurette-image是什么。

使用img-fluid将始终使其填满父对象的宽度。如果featurette-image设置了特定的高度，图像将失去其纵横比。

https://codeply.com/p/JgrBBiAmCV