Crop a picture with CSS [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am doing a Userstyle for a Website, so I can only change the CSS.
They generate their pictures with a white border at the top and the bottom which I want to get rid off.
The HTML-structure looks like this:
<a>
<img></img>
<span></span>
</a>
The span is a little coloured text-field, which overlaps the img, so putting overflow: hidden on the a doesnt work. (Because it will crop the span too)
I also tried using a border, but that didn't get me anywhere.
Is there another way?
EDIT: Here is a codepen of my problem

Answer 1

trautmann, take a look here:
https://jsfiddle.net/0qc27otz/
.wrapper {
background-color: grey;
padding-bottom: 4em;
padding-left: 4em;
padding-top: 4em;
width: 100%;
float: left;
}
div.wrapper a{
border: none;
display: block;
position: relative;
float: left;
width: auto;
height: 165px;
overflow: hidden;
}
div.wrapper a img{
display: block;
position: relative;
width: 100%;
margin-top: -5px;
}
.myspan {
display: block;
position: absolute;
bottom: 20px;
left: 5%;
width: 10%;
color: #FFF;
text-transform: uppercase;
font-weight: bold;
height: 16px;
background: red;
}
is that what you need?

Answer 2

As quantumwannabe said in the comments, you can use clip-path like so:
img {
-webkit-clip-path: inset(10px);
clip-path: inset(10px);
}
<img src="http://placehold.it/300x125">
Browser support is quite bad to be honest. Here's a fun tool to play with the property.

Answer 3

You can use clip-path on top and bottom, add this to your CSS, if the browser don't support clip-path it will not the end of the world, it will show the border image.
a > img{
/* top, right, bottom, left */
-webkit-clip-path: inset(2px 0px 2px 0px);
clip-path: inset(2px 0px 2px 0px);
}
Further Reading
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
Using clip-path

Answer 4

I suggest you to take a look here:
http://cssdeck.com/labs/full/1z7osafa
I added classes to img, a and wrapped everything to div.
So the main idea is to make to be blocks of definite height and hide the oversflow and also you can set any borders around.
Hope the code will be shown to you and you will understand it.
if no, here is html:
<div class='SomeWrapper'>
<a class='TheLinker' href='http://sdelanounas.ru/'>
<img class='TheIMG' src='http://sdelanounas.ru/i/c/2/r/f_c2RlbGFub3VuYXMucnUvdXBsb2Fkcy82LzkvNjk1MTM4NjU3MDk5NF9vcmlnLmpwZWc_X19pZD00NDYwMg==.jpeg'/>
<span class='sometext'>This Is a Great Plane</span>
</a>
<a class='TheLinker' href='topwar.ru/'>
<img class='TheIMG' src='http://cdn.topwar.ru/uploads/posts/2014-03/1395891634_2249x1444_su-34-frontovoj-zaschitnik-fullback.jpg'/>
<span class='sometext'>This Is a Great Plane</span>
</a>
</div>
Here is CSS:
div.SomeWrapper{
width: 100%;
display: block;
position: relative;
float: left;
}
div.SomeWrapper{
width: 100%;
display: block;
position: relative;
float: left;
}
a.TheLinker{
display: block;
position: relative;
float: left;
width: 48%;
margin: 0 1%;
height: 18em;
overflow: hidden;
}
a.TheLinker img{
width: 100%;
border: none;
}
span.sometext{
display: block;
position: absolute;
bottom: 1em;
background: rgba(255,255,255, 0.8);
color: #555;
text-shadow: #ccc;
width: 100%;
text-align: center;
}
a.TheLinker img{
width: 100%;
border: none;
}
span.sometext{
display: block;
position: absolute;
bottom: 1em;
background: rgba(255,255,255, 0.8);
color: #555;
text-shadow: #ccc;
width: 100%;
text-align: center;
}
I'm a newbie here so my code could be not properly formed, so sorry if something's not looking good..
If you have questions - ask, I think I really can help!