SVG loaded by URL doesnt resize with CSS

lerner_z4 0
Viewed 14

I have a avatar, which is loaded by url from the backend-server, but when trying to change width or using transform to downscale, nothing changes.

<img 
  className='navbar-avatar' 
  src={'http://localhost:8000' + userProfile.avatar}
/>

enter image description here

I want it to be smaller and be next to the username. Before the image i had a react icon which could be scaled with the "size" property.

reactjs
1 Answers

Take into consideration, now your svg is not an svg element. It's an image. Because of that you can set the size of the icon using the width and height of the image.

Look at this online example: https://codesandbox.io/s/sad-danny-49hmnh?file=/src/App.js

Basically, we have on the react part:


export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <img className="navbar-avatar" src="/icon.svg" alt="profile avatar" />
    </div>
  );
}

And the css:

.navbar-avatar {
  width: 80px;
  height: 80px;
}

You can play with it and change size and svg to test :)

Felipe Sanchez0
Related