Search code examples
htmlcssreactjssvghtml-table

Images doesn't scale up or down in the same ratio React

I was trying to build a React page for mobile and Web views. I've put an image for nonveg and veg Symbols on a table rendering the data. But when viewed from different-sized screens, the Non-Veg icon scales up larger than the Veg icon. Any solutions for it?

How it looks on S sized screen:

enter image description here

How it looks on a M sized:

enter image description here

On a L size:

enter image description here

My react HTML Code:

<thead className='DVthead'>
        <tr className='DVtr'>
        <th className='DVth'>Food</th>
          <th className='DVth'><img src="https://user-images.githubusercontent.com/74299799/210125736-3e021162-9217-4f6c-9d61-f9aceaa6e468.svg" alt='NON-VEG' /></th>
          <th className='DVth'><img src="https://user-images.githubusercontent.com/74299799/210125735-9d1831f4-28e3-4a8a-885a-0493de559372.svg" alt='VEG'  /></th>
          <th className='DVth'>Total</th>
        </tr>
      </thead>

CSS:

   .DVtd,  .DVth {
    border: 1px solid #ddd;
    padding: 20px;
  }
  .DVtr{
    color: #ffffff;
    border: 1px solid white;
    text-align: center;
  }
  
  .DVth {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: left;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
  }

  .DVth img {
    border-radius: 0px;
    width: 100%;
    image-rendering: pixelated;
    
  }

Help is highly appreciated.

Solution

  • Just use the CSS something like:

    th.DVth img{
    width: 200%; // needed only if image size is smaller than required and can be adjusted according to requirement
    height: 200%; // same as above
    max-height: 30px; // required height
}