How to convert responsive PNG img HTML to SVG img in react

user_5442187 0
Viewed 191

I am trying to convert a responsive img tag that uses different image sizes.

<img src="/img/theme/home/product-infra_x2.png" class="features__column__figure__img" srcset="/img/theme/home/product-infra_x3.png 1200w, /img/theme/home/product-infra_x2.png 800w" height="640" width="800" sizes="(max-width: 32em) 160px, 1200px" loading="lazy" alt="Image 1">

Now I will like to change this to use an SVG image file and keep the responsiveness and image sizing as same in react.

Here is what I have

import image1 from './images/image1.svg'
import image2 from './images/image2.svg'


<img src={image1} className="features__column__figure__img" height="640" width="800" sizes="(max-width: 32em) 160px, 1200px" loading="lazy" alt="Image 1">
...
...
...
<img src={image2} className="features__column__figure__img" height="640" width="800" sizes="(max-width: 32em) 160px, 1200px" loading="lazy" alt="Image 2">

But the images are not sized well and they are having different widths and heights for different SVG images.

how can I have the SVG responsive like it was setup with the HTML version?

reactjs svg css
1 Answers

Try to use css option object-fit: contain; in your className="features__column__figure__img".

about object-fit

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 400px;
  height: 500px;
  border: 2px solid red;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (min-width: 401px) and (max-width: 600px) {
  .container {
    width: 300px;
    height: 180px;
  }
}
@media screen and (max-width: 400px) {
  .container {
    width: 140px;
    height: 100px;
  }
}
<div class="container">
   <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"/>
 </div>

user_155451160
Related