Css Display an Image Resized and Cropped

CSS Display an Image Resized and Cropped

You could use a combination of both methods eg.

    .crop {        width: 200px;        height: 150px;        overflow: hidden;    }
    .crop img {        width: 400px;        height: 300px;        margin: -75px 0 0 -100px;    }

    <div class="crop">        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">    </div>

Resize and crop image with CSS

The only way you can achieve this only using css is to use the CSS background property combining it with the background-size and background-position properties.

SEE THIS FIDDLE

More information for these properties :

background-position

background-size

HTML:

<div class="container" style="background-image:url(http://www.recipestap.com/wp-content/plugins/wp-o-matic/cache/af4e1_ap.jpg)"></div>
<div class="container" style="background-image:url(http://3.bp.blogspot.com/-LAfvYIuz6c4/UpQxIe-FlmI/AAAAAAAAAcE/DVeCw1W6Yu4/s320/Eggless+Mini+Apple+Pie.JPG)"></div>

CSS:

.container { 
    width: 180px;
    height: 160px;
    border:red solid 2px;

    /* add following */
    background-size:cover;
    background-position:50% 50%;
}

ADDITIONAL INFORMATION

If you realy need the <img> tag for SEO reasons or other, you will need JS to face all the cases you may come through.

CASE 1 : image ratio is wider than container

Use height:100%; and width:auto; then you will need JS again to center the image in the container.

CASE 2 : image ratio is heigher than the container

Use width:100%; and height:auto; then JS or display:table;/display:table-cell to verticaly center the image in container.

I have used this technique on some projects but it is pretty heavy compared to the background CSS technique.

Resizing and cropping images with CSS

a "real crop" of images with css isn't possible. Real Crop means the the image is reduced to the new values and also it's size is smaller then before.

But there is a solution with negative margins or absolute positioning, which will help you a lot. I've used this technique many times.

Please take a look at:
Cropping images with CSS

How to crop, resize and center an img with a fixed height using CSS

This technique works quite well:

.container {
overflow: hidden;
position: relative;
height: 260px;
width: 358px;
}
.img-responsive {
position: absolute;
width: auto;
height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

To crop/resize an image to change the aspect ratio using CSS

For crop purpose I often make use of background-image on a element of type block or inline-block instead of relies on img tag:

.cropAndResize {    width: 327px;    height: 183px;    background-size: cover;    background-position: 50% 50%;    background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');}

<body>  <div class="cropAndResize"></div></body>

Image getting cropped rather than resize

If you set height to auto then it doesn't get cropped, but it throws the description out a little so you have to adjust the margin tops. I adjusted them to 18% and 15% Here is a fiddle

.data_block {  background-color: #EFEFEF;  width: 670px;  height: 130px;  margin-top:10px;  margin-left: auto;  margin-right: auto;  border-bottom-left-radius: 10px;  border-top-right-radius: 10px;  overflow: hidden;  }.data_image {  width: 250px;  height:auto;  border-bottom-left-radius: 20px;}.data_title a{  font-size: 15px;  font-family: "Century Gothic";  font-weight: 600;  vertical-align: top;  float: right;  margin-top:-19%;  width:450px;  margin-right: auto;  margin-left:auto;  text-align: center;  text-decoration:none;  color:#2E84C2;}

.data_title:hover a{ color: #272727;}
.data_desc {  font-size: 14px;  font-family: "Century Gothic";  text-align: center;  width:450px;  float:right;  margin-right:auto;  margin-left:auto;  margin-top: -15%;
}

<div class='data_block'> <img src='https://www.blueskyexhibits.com/website/wp-content/uploads/sky-home.jpg' class='data_image'/>   <div class='data_title'><p>     <a href='article/".$row['ar_id']."'>gdfgdfgdfggdf</a></p>   </div>   <div class='data_desc'>    <p>dfgdfgdfgdf</p>  </div></div>

Css Display an Image Resized and Cropped