我正在尝试将div放在另一个div的中间(水平和垂直)并将其缩放到最大值,同时保持纵横比.

如果我进行缩放但它保持在顶部/左侧,但是一旦我试图将它居中,它就会很好.

#area是一个外部div,#cont是要缩放的主要内容div. IRL它内部有一个复杂的结构,而不仅仅是一个图像,如下例所示.

有一些jsfiddle例子显示了我的尝试.要查看我的意思,请调整结果iframe的大小.

这是在左/上保持div的缩放：
https://jsfiddle.net/regc/3t4n3xud/1/

CSS

#area {
    top: 40px;
    bottom: 40px;
    left: 10px;
    right: 10px;
    display: block;
    position: absolute;
    border: 4px solid #73AD21;
}
#cont {
    width: 500px;
    height: 200px;
    position: absolute;
    border: 4px solid #aa2221;
}

JS：

cont_el.style['transform'] = 'scale(' + scale + ')';

cont_el.style['transform-origin'] = 'left top';

cont_el.style.width = i.width * scale;
cont_el.style.height = i.height * scale;

以下是我尝试将其置于中心但它会破坏：
https://jsfiddle.net/regc/4gcxcn7j/11/

CSS

#area {
    top: 40px;
    bottom: 40px;
    left: 10px;
    right: 10px;
    display: block;
    position: absolute;
    border: 4px solid #73AD21;
}
#cont {
    width: 500px;
    height: 200px;
    position: absolute;
    border: 4px solid #aa2221;
    margin:  0 auto;
    top: 50%;
    transform: translateY(-50%);
}

JS

cont_el.style['transform'] = 'scale(' + scale + ') translateY(-50%)';

cont_el.style['transform-origin'] = 'center center';

cont_el.style.width = i.width * scale;
cont_el.style.height = i.height * scale;

cont_el.style.margin = '0 auto';

cont_el.style.top = '50%';

最佳答案 我希望这就是你想要的!!使用transform-origin：左上角;

FIDDLE

scale_cont()
window.addEventListener('resize', scale_cont)

function scale_cont() {
  const o = getComputedStyle(document.getElementById('area'))
  const i = getComputedStyle(document.getElementById('cont'))

  const cont_el = document.getElementById('cont')

  const scale = Math.min(
    parseFloat(o.width) / parseFloat(i.width),
    parseFloat(o.height) / parseFloat(i.height));
  console.log('scale ', scale)

  /*
  	cont_el.style['-webkit-transform'] = 'scale(' + scale + ')';
  	cont_el.style['-moz-transform'] = 'scale(' + scale + ')';
  	cont_el.style['-o-transform'] = 'scale(' + scale + ')';
  	cont_el.style.transform = 'scale(' + scale + ')';
  */

  cont_el.style.transform = 'scale(' + scale + ') translate(-50%, -50%)';
  cont_el.style['-o-transform'] = 'scale(' + scale + ') translate(-50%, -50%)';
  cont_el.style['-webkit-transform'] = 'scale(' + scale + ') translate(-50%, -50%)';
  cont_el.style['-moz-transform'] = 'scale(' + scale + ') translateY(-50%, -50%)';


  cont_el.style['-webkit-transform-origin'] = 'top left';
  cont_el.style['-moz-transform-origin'] = 'top left';
  cont_el.style['-o-transform-origin'] = 'top left';
  cont_el.style['transform-origin'] = 'top left';

  cont_el.style.width = i.width * scale;
  cont_el.style.height = i.height * scale;



  cont_el.style.margin = '0 auto';

  cont_el.style.top = '50%';

  // cont_el.style.transform = 'translateY(-50%)';

}

#area {
  top: 40px;
  bottom: 40px;
  left: 10px;
  right: 10px;
  display: block;
  position: absolute;
  border: 4px solid #73AD21;
}
#cont {
  width: 500px;
  height: 200px;
  position: absolute;
  border: 4px solid #aa2221;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: top left;
}
#cont img {
  width: 100%;
  height: 100%;
  max-width: 100%:
}
#all,
#main {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  overflow: none;
  box-sizing: inherit;
}
#header {
  width: 100%;
  height: 30px;
  position: relative;
  top: 0;
  left: 0;
  background: #a4f4f4;
}
#footer {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #34f4f4;
}

<div id='all'>
  <div id='main'>
    <div id='header'>
      Header
    </div>
    <div id='area'>
      <div id='cont'>
        <img src='https://www.google.com.au/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
      </div>
    </div>
    <div id='footer'>
      Footer
    </div>
  </div>
</div>