Put image in div element and keep image ratio

HTML :

<div id="presentationViewContainer">
    <img id="presentationView" />
</div>

CSS :

#presentationViewContainer {
  display: none;
  position: absolute;
  width: 530px;
  top: 106px;
  left: 28px;
  box-shadow: 0px 0px 5px 4px rgb(75, 80, 86);
}

#presentationView {
  max-height:100%;
  max-width:100%;
}

Actual result if image is in portrait mode: : Image height is so big..

enter image description here

Expected result if image is in portrait mode : image should be on red square to see the entire image :

enter image description here

Actual result if image is in landscape : image should be centered :

enter image description here

Expected result if image is in landscape mode : image should be centered :

enter image description here

JSFIDDLE :

For portrait mode : https://jsfiddle.net/8e1p351u/
For landscape mode : https://jsfiddle.net/n9b8q82o/


Source: html5

Leave a Reply