Inserting pictures onto Bootstrap SVGs

Currently working on a website using Bootstrap 5 and incorporating an element from BS5 templates:

    <div class="col" data-aos="fade-up" data-aos-delay="200">
      <div class="card shadow-sm">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">Learn More</button>
            </div>
          </div>
        </div>
      </div>
    </div>

Seeking advice on replacing the rect element within the svg tag with an image of the same dimensions without affecting the text displayed over it. Any suggestions on achieving this using a different approach rather than defining a clip path?

htmlcsstwitter-bootstrapsvgbootstrap-5

Answer №1

To make the image fill the whole container area, you can use the <image> tag and set the width and/or height to 100%.

 <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
      <title>Placeholder</title>
      <rect width="100%" height="100%" fill="#55595c" />
      <image href="https://www.wpbeginner.com/wp-content/uploads/2018/12/svgnoqualityloss.png" width="100%"/>
      <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
    </svg>

Check out the example on JSFiddle: https://jsfiddle.net/rcuq7sLb/6/

You can also adjust the width and height of the image using height: 100%.

Explore more on JSFiddle: https://jsfiddle.net/rcuq7sLb/7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing the data in the hierarchy table to be invisible?

I am attempting to build a hierarchical table using Vue.js as the foundation. However, I want the table to remain hidden with no data displayed. The issue seems to be within this section of code: <tr v-if="item.childrenVisible" v-for="chi ...

htmlvue.jstreehierarchical-data

Changing links dynamically through jQuery

Below is the dynamicpage.js script: $(function() { var newHash = "", $mainContent = $("#main-content"), $pageWrap = $("#page-wrap"), baseHeight = 0, $el; $pageWrap.height($pageWrap.height()); ba ...

javascriptjqueryhtmlcss

Is it possible to detect when a user reaches the end of a div without using a scroll event?

Seeking a JavaScript solution that can identify when a user reaches the bottom of a div with overflow: auto. While there are numerous solutions on Stack Overflow utilizing the onscroll event, I am curious if this can be accomplished using newer technology ...

javascripthtmlscroll

What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling. $a = "<style>" $a = $a + "BODY{background-color:peachpuff;}" $a = $a + "TABLE{border-width: 1px;border-style: so ...

htmlcsspowershellfonts

Issues with the functionality of the submit button (html, js, php)

Seeking assistance with a submit button functionality issue - I have a simple submit button that allows visitors to enter their email address. Upon clicking the button, it should add their email to a CSV file and display a pop-up thank you message. The pr ...

javascriptphphtmlsubmit-button

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

htmlxpathseleniumfirebug

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...

htmlcssimagealignment

The fixed table header is misaligned with the body columns' width

I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...

htmlcsshtml-table

The event tooltip in fullcalendar does not show up as expected

Within my Laravel 5.8 / Bootstrap v4.1.2 / jQuery jQuery v3.3.1 fullcalendar v4.3.1 application, I am attempting to incorporate tooltips for events in the fullcalendar plugin. To achieve this, I referred to a specific example provided here: Sample Example ...

javascriptcssfullcalendartooltipfullcalendar-4

Guide to defining a conditional statement in a Nuxt.js application

I am working on displaying data from the Wordpress API in a Nuxt.js project. I am trying to organize the data by category, for example where ('post.category ', '=', 'categoryName '). Can anyone help me with the syntax in Vue.j ...

javascripthtmlvue.jsnuxt.js

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

Ensure that adjacent elements operate independently from one another

The code snippet provided above showcases four components: StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable. The FilterStatusCode component enables users to input search data using TagInput. If the user inputs numerous tags, this component expands ...

javascriptcssreactjsmaterial-ui

Unusual arrangement of images (HTML, CSS, Bootstrap)

I recently started my journey with freecodecamp a few days ago. I encountered my first project which required me to create a tribute page for anyone in the world. The page needed to include a picture, some text, and a link to an external site. However, I& ...

htmlcssbootstrap-4

Positioning three divs next to each other and aligning them at the bottom of the longest div

While I've seen similar questions about aligning divs in a row, my situation has a slightly different twist. I have three divs that I want aligned horizontally, with their content pushed to the bottom. I've attempted using position: relative and ...

htmlcss

What is the best way to retrieve the value of a div using AutoIt?

For this particular scenario, my objective is to extract a specific value from the last div element in the following list: <div id="past"> <div class="ball ball-8" data-rollid="242539">11</div> <div class="ball ball-8" data-ro ...

htmlwebautoit

Create a dropdown menu option that changes based on the number of items that have been

I need a selection option that displays values 1 to 5. Depending on the selected value, it should generate select options equal to the number selected. For example, if I choose 3, then it should generate 3 select options. Is it possible to loop the ajax in ...

phpjqueryhtmlmysqlajax

Issue with the navbar toggler not displaying the list items

When the screen is minimized, the toggle button appears. However, clicking it does not reveal the contents of the navbar on a small screen. I have tried loading jQuery before the bootstrap JS file as suggested by many, but it still doesn't work. Can s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Hello community, I am currently working on implementing a custom styled drawer within a flexbox container using the styled-engine-sc. I started with a template and tried to convert it into styled-components. Here is the source: https://codesandbox.io/s/vm ...

cssreactjsmaterial-uistyled-components

What is the best way to incorporate a div below an image in Ubergallery?

I have integrated the jquery ubergallery into my website, and I am trying to add a new div below the main photos for additional content such as share buttons and comments. I tried using the code that worked with colorbox, but since ubergallery uses colorbo ...

phpjqueryhtmlcsscolorbox