当使用边界半径和变换比例

Question

摘要

• 我有一个容器
• 在那个容器内，我有一个没有设定高度的图像
• 在图片div中我有一个img标签和另一个绝对定位的div
• 绝对定位的div位于图像的底部
• 当图像容器/ div没有设定的高度时，底部会出现1px的间隙
• 将鼠标悬停在该项目上时，图像会缩放

问题

我怎样才能摆脱这种差距？它在默认情况下很明显，但在图像缩放时悬停更糟

＆＃13;

＆＃13;

body {
  background: #ebebeb;
}
.item {
  width: 500px;
  height: 700px;
  float: left;
  background: #fff;
}
.item:hover img {
  transform: scale(1.1);
}
.image {
  width: 100%;
  height: auto;
  background: #999;
  position: relative;
  overflow: hidden;
}
.image .border {
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 5% 5% 0 0;
  background: #fff;
}

＆＃13;

<div class="item">

  <div class="image">
    <img src="https://www.w3schools.com/css/img_fjords.jpg"/>
    <div class="border"></div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

此处链接到codepen示例：http://codepen.io/anon/pen/RKddOB