CSS图像蒙版，img％高度

Question

这是一个挑战，基本上我有一个带有两侧透明度的图像的CMS，我试图掩盖它们我已经设法让侧面被掩盖，但底部似乎不起作用。这是JS小提琴文件的链接：https://jsfiddle.net/zqvktews/3/

裁剪图像不是一种选择，我有400多个...

HTML

<div class="test">
 <img class="inside" src="http://uploads.webflow.com/56f9678288dad33d7bb08de2/58b985d6b807bda0073d7511_255_Fortuna_v.png" alt="">
</div>

CSS

.test{
 width: 20%;
 background: red;
 overflow: hidden;
 margin:0px 10px 0px 10px;
 display: inline-block;
}

.inside{
 width: calc(100% + 20px);
 position: relative;
 top: -10px;
 left: -10px;
}

Answer 1

我想我得到了一个解决方案，虽然可能很难看：

HTML：

<div class="test">
 <div class="inner">
  <img class="inside" src="http://uploads.webflow.com/56f9678288dad33d7bb08de2/58b985d6b807bda0073d7511_255_Fortuna_v.png" alt="">
 </div>
</div>

CSS：

.test{
 width: 20%;
 background: red;
 overflow: hidden;
 margin:0px 10px 0px 10px;
 display: inline-block;
}

.inner{
 background-image: url("http://uploads.webflow.com/56f9678288dad33d7bb08de2/58b985d6b807bda0073d7511_255_Fortuna_v.png");
 display: block;
 background-size: calc(100% + 20px);
 background-position: -10px -10px; 
}

.inside{
   width:100%;
   visibility:hidden;
}

我在这里做的简短形式：

我用另一个容器包裹原始图像。我没有将图像放大20像素，而是让它看不见（虽然保留了它的预留空间）。内部容器现在获得与背景相同的图像，该背景根据您的要求进行拉伸和移动。

此处可能存在的问题：您的图像不再是图像，尽管您可以通过仅显示透明像素的图像（如果您确实想要保留alt标记）实现相同的效果。这不是严格的完美html，但它可以在屏幕上和html文本阅读器中正确呈现。

Answer 2

稍微改变一下：

• 使用display: block
删除extra inline gap underneath the image
• 使用calc计算宽度10px。现在可以以5px
的增量移动图像
• 将图像粘贴到底部，使用bottom: -5px
剪切图像
• 以负10px边距重新拉回图像
• 以-5px边距拉
图像

像这样：

.inside{
  display: block;
  position: relative;
  width: calc(100% + 10px);
  margin: -10px 0 0 -5px;
  bottom: -5px;
}

给我们：

完整示例

注意：对于此示例，我已重新托管图像，因此链接不会中断。它们现在是jpgs，图像周围有白色间隙，而不是透明。

＆＃13;

＆＃13;

.test {
  width: 20%;
  background: red;
  overflow: hidden;
  margin: 0px 10px 0px 10px;
  display: inline-block;
}

.inside {
  display: block;
  position: relative;
  width: calc(100% + 10px);
  margin: -10px 0 0 -5px;
  bottom: -5px;
}

＆＃13;

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

<div class="test">
  <img class="inside" src="https://i.stack.imgur.com/j0rVY.jpg" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;