CODEWITHSUNDEEP
htmlcss
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29109

Image shown outside dialog with IE11

I'm trying to fit an image inside a dialog. In chrome this works perfectlyenter image description here

But with IE11 something goes wrong:

enter image description here

DEMO

CSS

dialog {
    max-width: 300px;
    height: 100px;
    border: 2px solid #000;
    background-color: green;
}

dialog img {
    width: 80vw;
    max-width: 100%;
    max-height: 100%;
}

So, the image cannot be wider than 80% of the viewport, but also, it cannot be wider than 300px which is set on the dialog element.

Any suggestions why this doesn't look so goodin IE11 ?

Upvotes: 0

Views: 29

Answers (1)

Kaitou Kid
Kaitou Kid

Reputation: 51

Dialog tag only support on Chrome, not on Firefox or IE. Visit http://caniuse.com/#feat=dialog for more detail.

I have some change to work well on IE. Fiddle: https://jsfiddle.net/cuongle/oeaojswm/1/

CSS: 

#demo {
  max-width: 300px;
  height: 100px;
  border: 2px solid #000;
  background-color: green;
  padding: 10px 0;
}

#demo img {

  max-width: 100%;
  max-height: 100%;
}

Upvotes: 1

Related Questions