Replace bootstrap-5 svg placeholder with img

user_15310005 0
Viewed 2530

I am trying to copy the style from the Bootstrap 5 carousel home page. Doing fine with everything except the "featurette-image" 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.

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!

<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>

Placing an img and assigning it the class "featurette-image" is always overridden by the "img-fluid" class and scrunches the image up in a weird way.

<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>

Any and all help would be appreciated!

bootstrap-5 twitter-bootstrap css html
2 Answers

I haven't replied to one of these before and I dont know if this is the most elegant solution but this worked for me as I kept the elements I needed from the SVG statement and input these into the img function as follows.

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

It should be a case of replacing the SVG statement and putting the correct filepath for your image. I tested this on the carousel home page too.

user_157636340

You never explained what featurette-image is.

Using img-fluid will always make it full the width of the parent. If featurette-image is setting a specific height the image will lose its aspect ratio.

https://codeply.com/p/JgrBBiAmCV

user_1714560
Related