Question

这是plunker示例，左（黄色）单元格是相关单元格。它不是特定于引导程序，但我使用它的类来使图像响应。

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Redirect index.php to home" stopProcessing="true">
          <match url="index.php" ignoreCase="false" />
          <action type="Redirect" url="home" redirectType="Permanent" />
        </rule>
      </rules>
    </rewrite>      
  </system.webServer>

相关的css，借用了bootstrap

  <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>

我想要完成的事情：

将图像按比例放入容器（带有一些填充的自举列）（ok）
使其保持在中心位置稍微小一点，容器尺寸不变（ok）
在悬停时将其设置得更大，同时仍将其保持在中心位置，容器的大小不变（使用.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>左对齐。

如何解决这个问题？我将在页面上使用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

Plunker版本：http://plnkr.co/edit/HYJ9XJ8rAc3cgVI0uKFe?p=preview

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

将left: 0和right: 0添加到您的绝对定位元素。

在保持容器大小的同时调整居中的响应式img的大小

1 个答案: