CSS 图像遮罩，高度为 % 的 img

Question

这是一个挑战，基本上我有一个 CMS，其图像的侧面是透明的，我正试图掩盖它们我设法掩盖了侧面，但底部似乎不起作用.这是 JS fiddle 文件的 link：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;
}

我在这里所做的简短形式：

我用一个额外的容器包裹了原始图像。我没有将图像放大 20px，而是使其不可见（尽管保留了它的保留 space）。内部容器现在获得与背景相同的图像，并根据您的要求进行拉伸和移动。

此处可能出现的问题：您的图像不再是图像，尽管您可以使用仅显示透明像素的图像实现同样的效果（如果您真的想保留 alt-tag）。它不是严格意义上的完美 html，但它可以在屏幕上和 html 文本阅读器中正确呈现。

Answer 2

稍微改变一下：

删除 extra inline gap underneath the image 和 display: block
用计算器将宽度填充 10px。现在可以以 5 像素为增量移动图像
把图片贴在最下面，用bottom: -5px裁剪图片
以负 10px 边距将图像拉回来
将图像向左拉 -5px 边距

像这样：

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

给我们：

完整示例

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

.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;
}

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

CSS 图像遮罩，高度为 % 的 img

CSS image masking, img with % height

css

calc

完整示例