Stop image resizing on bootstrap Card

Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop the image from resizing.

<div className ="container" id="mainContainer">
  <div className ="row mt-4">
    <div className="col-md-4">
      <div className="card" >
        <img  className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
         </img>
         <div className="card-img-overlay">
           <span className="badge badge-dark"> 1 </span>
         </div>
         <div className="card-body">
           <h5 className="card-title"> Bulbasur  </h5>
           <span className="badge badge-light"> poison </span>
         </div>
      </div>
  </div>
</div>

Desired outcome: https://i.sstatic.net/mdeUm.png

Actual result: https://i.sstatic.net/o7fhB.png

Answer №1

To ensure the image is displayed correctly, place it within its own container DIV and utilize the w-auto class to adjust the width:100% attribute of card-img-top.

         <div class="card">
            <div class="text-center bg-light">
                <img class="card-img-top mb-3 w-auto" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
            </div>
            <div class="card-img-overlay">
                <span class="badge badge-dark"> 1 </span>
            </div>
            <div class="card-body">
                <h5 class="card-title"> Bulbasur  </h5>
                <span class="badge badge-light"> poison </span>
            </div>
        </div>

Answer №2

To customize your webpage, include a new style rule for .img-responsive in your CSS file.

.img-responsive 
{ 
    width:100%;
}

Update the code snippet to

<img  className="card-img-top bg-light mb-3 img-responsive " alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
</img>

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

Error: Unable to access 'type' property of null value

I am trying to display an Alert in my React app, but I am facing issues with it. When I try to type {props.alert.type} and {props.alert.msg}, the code doesn't seem to work. I am stuck here and would appreciate any help in resolving this. import React, ...

What are the potential drawbacks of not using fragments as the default choice in React.js?

When writing a functional component in React.js, the standard approach is to use a return ( ... ) statement. However, React requires the return of a functional component to be a single node, so developers often use fragments to wrap all the contents with r ...

Obtain environment variables within a Strapi plugin

I am currently working on developing a Strapi local plugin, but I am facing an issue with retrieving variables defined in my .env file located at the root of my project. Specifically, I am trying to access this value within my React component (plugins/myPl ...

Updating the component following an API request in ReactJS

I'm currently working on a component that allows users to search for friends by entering their email address. The interface consists of an input form where users can submit the email and I want to display the friend's information below the form a ...

Looking to open a new tab in React when a button is clicked? I also need to pass some data to the new page

I'm currently developing a feature where users can raise an invoice by clicking on a button. When the button is clicked, an API call will be made and upon receiving the response, I need to send some data to a specific page (RaisedInvoice.jsx) that sho ...

Do I really need to use useEffect in my code?

After working with React Hooks for a few months and consistently using the useEffect hook based on the documentation, a new team member has raised questions about its necessity. Despite going over the documentation together, he believes that implementing u ...

Managing API responses using Redux and Typescript

As a beginner in Typescript, I am struggling to integrate Redux with it. The documentation on using Redux with Typescript is confusing me. I am attempting to fetch data and dispatch it to my reducer for future use, just as I did before adopting Typescript ...

MUI Chips serving as selectible tags with checkbox-like functionality

I have retrieved data from a JSON file containing information about different types of chips: [ { "id": "4", "name": "Caucasian" }, { "id": "5", "name": "Asian" }, ...

React Router consistently displaying IndexRoute

This is the main file for my app: import React from 'react'; import { render } from 'react-dom'; import { browserHistory, Router, Route, IndexRoute } from 'react-router'; // Components import Main from './components/cor ...

What is the reason for the excessive width of the final column in this table?

I am currently working with a dataset that I am displaying using the handsontable library in the form of a table. One issue I am facing is that the last column of my table appears too wide even though I did not specify any width for it. Below you can see t ...

What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work ...

Formatting code within an HTML document

I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...

Tips for styling expandIcon in MUI Accordion while the Accordion is in its expanded state

Seeking help in removing the padding-top from the ExpandIcon within the Accordion component when it is expanded. I'm currently exploring the documentation provided by MUI on how to target specific styles and states, but finding it challenging to compr ...

Error encountered in azure devops preventing successful execution: "npm ERR! code ELIFECYCLE"

I am facing an issue with my Azure DevOps build pipeline that contains 2 npm tasks: - one for npm install - and the other for npm run-script build Unfortunately, I am encountering errors that do not provide sufficient information about the root cause of ...

How to customize the color of md-radio-button in Angular?

I've been trying to customize the color of my radio buttons, but I haven't had much luck. Here are a couple of examples I attempted: Example 1 HTML <md-radio-button class"radio-button"> yes <md-radio-button> CSS //checked .radio- ...

Encountering difficulties in npm installation of redux and datepicker

Attempted to use the npm command below to install redux, react-datepicker, and react-router-dom. npm i react-redux @reduxjs/toolkit react-datepicker react-router-dom@6 Realized that package.json was not being updated and received the following message in ...

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

Using useState to initialize a long value

Obtaining a very large state from JSON can be challenging, especially when it consists of at least 50 lines. During page generation, an error like "there is no such value" may occur if the initial value is not set and the interface is not assigned properl ...

Adjusting the maximum width of a Bootstrap container

I am currently working on a login page project using Bootstrap 4 and I have a question regarding the max width of containers with Bootstrap. It appears that the maximum width is set to 1140px by default, but my monitor has a resolution of 1920px. Do I need ...

Ensuring a full height div using CSS

I have encountered an issue and created a fiddle to help illustrate it: http://jsfiddle.net/XJpGT/ The challenge I am facing is ensuring that the height of the green box always remains at 100%, while also making sure that the green and orange boxes do not ...