对img的悬停比例效果会导致父进程溢出

Question

悬停时，图像应按比例增加，但不应溢出其.b的父overflow: hidden。

目前，图片的底部在悬停时溢出父.b。

Here is the example in a fiddle with SCSS.

这是编译CSS的示例。将鼠标悬停在图片上：

.image {
  display: table;
  height: 100%;
}
.image .w {
  display: table-cell;
}
.image .b {
  display: block;
  overflow: hidden;
}
.image.va .w {
  vertical-align: middle;
}
.image img {
  max-width: 100%;
  height: auto;
  transform: scale(1);
}
.image:hover img {
  transform: scale(1.15);
}

<div class="image va">
  <div class="w">
    <div class="b">
      <img src="http://placehold.it/350x150" />
    </div>
  </div>
</div>

怎么办？

Answer 1

图像正在逃避其容器的溢出，因为默认情况下图像为display: inline和vertical-align: baseline。

有两个选项

1. 看来图片无需保留默认display: inline，因此请使用img display: block来消除溢出

   或

2. 将图片的vertical-align属性更改为top / middle / bottom

完整示例 - 图像显示：块

已编译的CSS - also in the fiddle with SCSS

.image {
  display: table;
  height: 100%;
}
.image .w {
  display: table-cell;
}
.image .b {
  display: block;
  overflow: hidden;
}
.image.va .w {
  vertical-align: middle;
}
.image img {
  max-width: 100%;
  height: auto;
  transform: scale(1);
  display: block;
}
.image:hover img {
  transform: scale(1.15);
}

<div class="image va">
  <div class="w">
    <div class="b">
      <img src="http://placehold.it/350x150" />
    </div>
  </div>
</div>

Answer 2

试试这可能会对你有帮助。

LINK

img {
    max-width: 100%;
    height: auto;        
    transition: all .2s ease-in-out;
    display: block;
}