IE11: Figure with .img-fluid is not resized #25242
Labels
Comments
JackMorganNZ
added a commit
to uccser/cs-unplugged
that referenced
this issue
Feb 2, 2018
|
Adding |
|
easy pick |
|
.img-responsive has the max-width:100%; display:block; and height:auto; styling. I wonder if the 'Reponsive Images' section on https://getbootstrap.com/docs/4.0/content/images/ should be updated from .img-fluid to .img-responsive? |
mdo
added a commit
that referenced
this issue
May 13, 2020
Turns out this applies to IE11 as well as IE10, so this clarifies the docs callout. Closes #25242.
|
Fixed in #30809. |
XhmikosR
added a commit
that referenced
this issue
May 14, 2020
Turns out this applies to IE11 as well as IE10, so this clarifies the docs callout. Closes #25242. Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The fluid image in a figure container is not resized at all making it overflow the content area.
On MacOS with Safari 11.0.2 it looks fine:
On Win 7 with Internet Explorer 11 .0.9600.18015 it looks like this:
Does seem to be somewhat related to
display: inline-blockonfigureas deactivating that property (falling back to 'display: block' makes it look fine on IE11:There have been related issues (#20970, #21360, #21886, #21888) describing this behavior for older versions of Firefox or which are closed to inactivity. There doesn't seem to be a fix for IE11 (which is a supported version I suppose).
I created a minimal example on JS Bin.
The text was updated successfully, but these errors were encountered: