CSS image masking, img with % height

Question

Here's a challenge, basically I've got a CMS with images that have transparency on the sides and I'm trying to mask them I've managed to get the side's masked but the bottom doesn't seem to work. Here's a link to the JS fiddle file: https://jsfiddle.net/zqvktews/3/

Cropping the images is not an option, I've got a 400+ of them...

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

Can't you fix the height of the container (class test) ? Or you could crop with a PHP (or any other language) script. — Zetura, Mar 03 '17 at 20:06
Unfortunately not, because these are meant to resize with percentages... — Kyle McBride, Mar 03 '17 at 21:48

score 0 · Answer 1 · answered Mar 03 '17 at 22:28

I think I got a solution, although a maybe ugly one:

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

Short form of what I did here:

I wrapped the original image by an additional container. Instead of making the image 20px larger, I made it invisible (though keeping its reserved space). The inner container now gets the same image as a background which is streched and moved according to your requirement.

The possible problems here: Your image is not an image anymore, although you could achieve the same with an image showing just a transparent pixel (if you really want to keep the alt-tag). It's not strict perfect html, but it would render correctly on screen and in html text readers.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Change things slightly:

Remove the extra inline gap underneath the image with display: block
Pad the width by 10px with the calc. Moving the image can now be done in increments of 5px
Stick the image to the bottom, cutting the image with bottom: -5px
Pull the image back up with a negative 10px margin
Pull the image left with -5px margin

Like this:

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

Gives us:

Full example

Note: For this example I have re-hosted the images so the link wont break. They are now jpgs with a white gap around the image, instead of transparent.

.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 image masking, img with % height

2 Answers2

Full example