Fluid class for .svgs?

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

Add comment

MWCCredit priority answered 6 years ago

0 0 Best answer

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; }

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

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

Add comment

Ollie Vincent pro answered 6 years ago

3 0 Best answer

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.

Add comment

Write

Create snippet

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

MWCCredit

45Support score
6Questions 2Answers 1Snippets