SVG with .img-fluid should always be shown in fullwidth

[sergej2705]

I think it would make sense if we extend the img-fluid-mixin with something like:

&[src$=".svg"] {
  width: 100%; // Vector-Graphics should always scale to full parent width
}

Because I think If someone uses a Vector-Graphic with .img-fluid he wants to show it in fullsize and not only in the viewBox-size.

[cvrebert]

This has been suggested previously (#13996), and deemed insufficiently general because it:

• doesn't handle URLs with querystrings
• doesn't handle URLs without extensions

Rather than using an imperfect heuristic which will cause confusion when it suddenly stops working when someone encounters one of the failure cases, we've opted to instead document the relevant IE8-10 bug and the workaround for it (http://getbootstrap.com/css/#callout-images-ie-svg ).

Note that .img-fluid should already make SVGs full-width in all other supported browsers.

We appreciate the thought though!

[sergej2705]

I have made an JS Bin here: https://jsbin.com/hekonoxoba/3/edit

The SVG used will be fluid up to a width of 249px. If the column gets bigger the image will not take the full column width.

Note that .img-fluid should already make SVGs full-width in all other supported browsers.

It doesn't work if the width-attribute of the SVG is smaller then the size of the image-container.

[cvrebert]

Ah, right, viewBox. Different from the IE bug.

I think If someone uses a Vector-Graphic with .img-fluid he wants to show it in fullsize and not only in the viewBox-size.

Without an additional class or something, the intention seems unclear. I can imagine reasonable cases to use .img-fluid even if the user wants the SVG to obey an intrinsic maximum size. .img-fluid prevents the image from overflowing its container until there's enough space to show it at its intrinsic size. Maybe the fact that the image is an SVG is an irrelevant detail to the user and they expect typical raster-ish behavior with respect to sizing.

Perhaps there should be a width: 100% utility class to accommodate cases such as yours.

[sergej2705]

That could be an option, too.

[cvrebert]

We're adding the utility class: #19234

[cvrebert]

Resolved by #19234.