调整中心响应img的大小，同时保持容器的大小

Question

这是一个矮胖的例子，左（黄色）单元格就是相关的单元格。 它不是特定于引导程序的，但是我使用了它的类来使图像响应。

  <div class="container">
  <div class="row">
  <div class="col-xs-6" style="padding:30px; background:yellow">
    <div class="wrapper">
    <img class="center-block img-responsive" style="position: absolute" src="..."">
    <img class="center-block img-responsive" style="visibility: hidden" src="...">
    </div>
  </div>
  <div class="col-xs-6" style="padding:30px; background:lime">
    <img class="center-block img-responsive" src="...">
  </div>
  </div>
  </div>

和相关的CSS，从Bootstrap借来的

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-responsive {
  display: block;
  max-width: 100%;
  width:90%;
  height: auto;
}

.img-responsive:hover {
  min-width:110%;
}

.wrapper {
  position: relative;
  height: 100%; 
}

我要完成的事情：

• 按比例将图像放入容器（此处带有一些填充的引导栏）中（确定）
• 将其保持在中心位置时使其变小，容器的尺寸不变（确定）
• 在悬停时将其增大，同时仍保持其居中，容器的大小不变（已通过transform: scale固定）
• 第二个分层图像（绝对定位）应适合第一个分层图像的大小和位置（不正确）

我已将占位符<img>隐藏以保持容器的大小，但<img>的position: absolute会向左对齐。

如何解决？ 我将在页面上使用JS，但显然我不希望使用它以编程方式将该图像固定到占位符。

Answer 1

在悬停时将其增大，同时仍将其保持在中心，容器的大小不变使用CSS3的transform属性：

.img-responsive:hover {
  transform: scale(1.1);
}

https://developer.mozilla.org/fr/docs/Web/CSS/transform

确保为transform属性添加前缀： http : //caniuse.com/#search=transform

柱塞版本： http ：//plnkr.co/edit/HYJ9XJ8rAc3cgVI0uKFe？p = preview

第二个分层图像（绝对定位）应适合第一个分层图像的大小和位置

在绝对位置添加left: 0和right: 0 。