jquery - 如何通过任何平行边将子 div 放入父 div 中，并保持调整大小的比例？

Question

因此，子 div 将包含一个图像，我需要根据高度或宽度(图像不具有相同的高度或宽度)在垂直或水平方向拉伸(stretch)到一侧。如果我使用缩放属性或 vw，vh(如您将在 jsfiddle 中看到的那样)，效果很好，但问题是大多数浏览器不支持(也将是移动网站)。我希望 jsfiddle 能更好地解释我需要什么，如果不问的话，会更好地解释。

.box {
position: absolute;
width: 70%;
height: 61.6%;
background-color: #ececec;
margin: auto;
top: 0;bottom: 0;left: 0;right: 0;}

'content' div 是将包裹图像的 div
http://jsfiddle.net/s8Lmu6w5/

PS:你可以使用 JS/JQuery。因为我想我尝试了 99% 的 html/css 组合.... 谢谢!

Answer 1

带有 <img>我们可以使用的元素 max-height: 100%和 max-width: 100% .永远不会达到 100% 的完整宽度，永远不会达到 100% 的完整高度，所以比例仍然是 1:1

工作示例

请注意，在此示例中，图像是根据视口(viewport)而不是它的父对象定位的。如果需要，您可以删除所有 div 并获得相同的结果。

兼容性:使用此技术将图像垂直居中需要最大高度为 px图像在 IE8 中居中的长度(不是百分比)。

.box {
  position: absolute;
  width: 70%;
  height: 61.6%;
  background-color: #ececec;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content img {
  margin: auto;
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class='box'>
  <div class='content'>
    <img src="http://www.placehold.it/800x500" />
  </div>
</div>