Giters

coliff / bootstrap-ie11

Internet Explorer 11 compatibility solution for Bootstrap 5

Home Page:https://coliff.github.io/bootstrap-ie11/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Figure with .img-fluid is not resized

Re-Fish opened this issue · comments

commented

"The fluid image in a figure container is not resized at all making it overflow the content area".
I've met this and found that it is a known issue here. The solution is just to add this code to your css-file:

figure .img-fluid {
    width: 100%;
}

May be it could be solved somehow in the future.

img-fluid broken
img-fluid fixed

commented

Heya. Thanks for reporting this issue. I can reproduce the issue - though it's unfortunately not as simple as adding:

figure .img-fluid {
    width: 100%;
}

because the above can break the correct sizing of SVG images. I'll take a deeper look into this tomorrow, but for now I've added a figures section to the demo page.
https://coliff.github.io/bootstrap-ie11/tests/#figures

commented

Scaling works better without ".img-fluid" in my previous message because at that variant it was disproportional. But now I can't set min-height for the image.

commented

Also I've noticed next behavior:
if there is no "max-width" specified for

in CSS and an image has bigger width than the area containing this image then this image is overflowing that area. If we specify "max-width" for then we can see that this image looks OK but the area containing this image behaves like this image is shown fullsize.

without max-width


with max-width

commented

I don't think there is a single CSS fix we can add which would work in all cases. Sometimes specifying the width and height attributes on the image will be enough, other times you'll need to add width: 100%; CSS.

Let me know if you have any other suggestions, but for now I think we should just document this potential issue in the README and demo.