jquery - 将图像放在 div 元素中并保持图像比例

Question

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%;
}

如果图像处于纵向模式，则实际结果::图像高度太大..

图像处于纵向模式时的预期结果:图像应位于红色方 block 上以查看整个图像:

如果图像是横向的实际结果:图像应该居中:

图像处于横向模式时的预期结果:图像应居中:

JSFIDDLE :

纵向模式:https://jsfiddle.net/8e1p351u/ 对于横向模式:https://jsfiddle.net/n9b8q82o/

更新:

这是现在的实际结果:

如何设置图片在红色方 block 中的位置？

Answer 1

使用 css3 新规则这很容易:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

如果您担心旧浏览器，在很多情况下 flexbox 对您或翻译方法都无济于事。如果这对您来说非常重要，您可以为图像指定尺寸并执行以下操作:

.container img{
  width: 400px;
  height: 300px;
  margin: -150px 0 0 -200px;
  position: absolute;
  top:50%;
  left:50%;
}