title: Replace bootstrap-5 svg placeholder with img
body: <p>I am trying to copy the style from the Bootstrap 5 carousel home page. Doing fine with everything except the &quot;featurette-image&quot; class and replacing the placeholder SVG with an IMG that acts in the same way. Now, I have found it easy to copy in select formats (70vh...fixing 500px) but none of them react well when I change the view screen nor look like the SVG placeholder.</p>
  <p>The original code is below. I simply don't know how to make an image copy the 500x500 rectangle SVG placeholder and it is bugging me out!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row featurette"&gt;
        &lt;div class="col-md-7"&gt;
          &lt;h2 class="featurette-heading"&gt;And lastly, this one. &lt;span class="text-muted"&gt;Checkmate.&lt;/span&gt;&lt;/h2&gt;
          &lt;p class="lead"&gt;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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-5"&gt;
         
          &lt;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"&gt;&lt;title&gt;Placeholder&lt;/title&gt;&lt;rect width="100%" height="100%" fill="#eee"/&gt;&lt;text x="50%" y="50%" fill="#aaa" dy=".3em"&gt;500x500&lt;/text&gt;
        &lt;/svg&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Placing an img and assigning it the class &quot;featurette-image&quot; is always overridden by the &quot;img-fluid&quot; class and scrunches the image up in a weird way.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row featurette"&gt;
        &lt;div class="col-md-7 order-md-2"&gt;
          &lt;h2 class="featurette-heading"&gt;Oh yeah, it’s that good. &lt;span class="text-muted"&gt;See for yourself.&lt;/span&gt;&lt;/h2&gt;
          &lt;p class="lead"&gt;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.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="col-md-5 order-md-1"&gt;
          &lt;img src="https://cdn.pixabay.com/photo/2012/11/28/13/53/osprey-67786_1280.jpg" class="feaurette-image img-fluid mx-auto"&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any and all help would be appreciated!</p>