1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Fluid class for .svgs?

MWCCredit priority asked 6 years ago

Hello! I was wondering what the best practices were to replace a .jpg with a .svg using the 'fluid' class img-fluid class does not work with .svg. So replacing a img-fluid image results in the .svg parenting the to the upper-left hand corner and not scaling with   Thank you for your assistance

MWCCredit priority answered 6 years ago

Thank you Ollie.   The following style worked for me   .svg-container { display: inline block; position: relative height: 100%; width: 60%; padding-bottom: 20px vertical-align: middle; overflow: hidden; margin: auto; }    

Jakub Strebeyko staff answered 6 years ago

Hi there MWCCreadit, Did Ollie's answer help you? Best, Kuba

Ollie Vincent pro answered 6 years ago

Hi,

The image-fluid class is

img{max-width:100%;}

so could you not do something similar for svg's?

I have never tried it, I just use FontAwesome 5 :) (which are tehcnically svg's anyway).

I have also found that

svg{display:flex; justify-content:center; align-items:center;}

helps to centre them.

 

 

 

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
MWCCredit
45Support score
6Questions 2Answers 1Snippets