Crop div from left and right - html

Question

This is my code:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
<img src"myimg.png"/>
</div>
I want to crop from left and right my image in this div.
But it only crop a part from right.
I want to do something like this (which works in IE 8-10 too).
Thanks in advance!!!

Answer 1

You can keep your HTML as is and make the image's position:relative and the position left:-50% (or margin-left:-50%).
Your HTML:
<div id="cropper">
<img src="http://lorempixel.com/output/sports-q-c-900-600-3.jpg" />
</div>
Your CSS:
#cropper{
width:450px;
height:600px;
overflow:hidden;
}
img{
position:relative;
left:-50%;
}
Here's the demo.
EDIT
To accurately center the image in any div size, you need to position the image in pixels and not in percentage unless the container is exactly half the size of the image. So the final CSS of an image size of 900x600 pixels would be:
img{
position:relative;
left:-450px;
}

Answer 2

You can use clip-path to crop pretty much anything:
.crop-left {
clip-path: inset(0 50px 0 0);
}
.crop-right {
clip-path: inset(0 0 0 50px);
}
.crop-top {
clip-path: inset(0 0 50px 0);
}
.crop-bottom {
clip-path: inset(50px 0 0 0);
}

Answer 3

Why not set the image as background?
HTML
<div id="mydiv" style="width: 75px; height: 75px; text-align: center; overflow: hidden;">
</div>
CSS
#mydiv
{
background-image:url('myimg.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Answer 4

Here this is s small trick to crop a div...
put the div you want to crop inside another div..
set overflow of outer div to hidden
them simply shift the inner div as you want to crop it using margin_left,right,top,down attributes...
<div style="overflow:hidden;">
<div id="myDiv" style="overflow:hidden;margin-top:-30px"></div>
</div>
Simple :)

Answer 5

What you want is not possible with an <img>. However, you can use the "CSS Sprite" trick:
<div style="width: 75px; height: 75px; text-align: center; overflow: hidden;
background: url(myimg.png) no-repeat center center">
</div>
No jsFiddle, sorry, as I don't have your image.

Answer 6

here's a solution proposed a few times here for similar questions:http://codepen.io/gcyrillus/pen/BdtEj
/* see demo : http://codepen.io/gcyrillus/pen/BdtEj , to play with and understand */
parent {
line-height:equals to height;
text-align:center;
}
parent img {
vertical-align:middle;
margin:-100%;
}
It's about clipping your image.You have that old and usefull CSS rule : clip:rect();
http://www.w3.org/wiki/CSS/Properties/clip wich has this purpose.
Or using a trick (cause you enjoy to play with CSS) to reduce virtually image zize to null, so it centers horizontally and vertically no matters it's real size.
http://codepen.io/gcyrillus/pen/BdtEj

Answer 7

You can just set a background image to the div
HTML
<div class='myDiv'></div>
CSS
.myDiv {
width: 75px;
height: 75px;
background: url('myimg.jpg') no-repeat -123px 0px;
}
Adjust -123px to the correct left offset from where cropping should start.
EDIT: jsFiddle

Answer 8

There are more possible solutions for this:
Using a container div and applying negative positioning on the image. Or you can set the image as the background of div which makes you able to use background-position for example.

Answer 9

Below is the DEMO link as per your requirement, which work in ie.
<div class="mainDiv">
<div class="green"></div>
</div>
.mainDiv {
margin:0 auto;
border:1px solid #000;
width:700px;
height:500px;
text-align:center;
}
.mainDiv .green {
width:100px;
height:100px;
background-color:red;
display:inline-block;
}

Answer 10

It's possible with image and any element, css positioning, provided that you know the width of the image.
Add position:relative to the div, and position:absolute on the image together with half the width of the image in a left:-204px;top:0;.
Example fiddle: http://jsfiddle.net/ctXcJ/2/

Answer 11

try margin: 0 auto; instead of text-align.