search

coliff / bootstrap-ie11

Internet Explorer 11 compatibility solution for Bootstrap 5
https://coliff.github.io/bootstrap-ie11/
MIT License
96 stars 15 forks source link

Figure with .img-fluid is not resized #52

Closed Re-Fish closed 2 months ago

Re-Fish commented 3 years ago

"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

coliff commented 3 years ago

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

Re-Fish commented 3 years ago

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.

Re-Fish commented 3 years ago

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

coliff commented 3 years ago

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.