How to make centre cropped image responsive?

Question

Based on an existing answer, I have managed to centre crop an image. I am having trouble making the centre cropped image responsive, though.

Question

Answer 1

just give width in % instead of px .

.center-cropped-img {
    width: 640px;// add in %
    height: auto;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

Answer 2

Read the comments in the code for an explanation.

JSFiddle

HTML

<div class="container">
  <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="container">
  <img src="http://i.imgur.com/BQUgmlB.png" alt="" /> 
</div>

CSS

/*some basic markup for a flexible container to crop the image*/
.container {
    width: 80%;
    border: 3px red double;
    margin: 50px auto;
    padding:0;
    overflow: hidden;/*do not show image that is overflowing*/
    background-color: yellow;
}
.container img {
    display: block;
    width: 200%;/** (1 / part of the total image width you want shown)*100% In this example you want to show 50% of the image-width**/
    margin-left:-50%;/*move the image to the left, removing that content from view (and making content on the right appear). -0% will show the left side of the image. The negative value of the defined width in the rule before this one + 100% will show you the right side of the image. I guess you can figure the rest out by changing this value.*/
    margin-top: -25%;/*changing the top and bottom values is a bit of a pain. After some trial and error (in google chrome) it appears they are based on the width of the image container, not the height (how unusual is that!!!). So putting -100% in this value would (re)move the image up by the px value of the width of the #container div. If you are using css sprites you should avoid setting this value other than 0%.
Alternatively do some math on the original dimensions of the image:    -(vertical pixels you want off the image)/(image width)* 100%    should work for pixel precision).
The good news is that the image scales with the #container div. So the image grows and shrinks with the container showing the exact same part of the image (and not showing more/less content).*/
    margin-bottom:-25%;/*(re)move some of the bottom part of the image. See margin-top for more (works identical)*/
}  

Answer 3

I have tried with a script. I simply created a function and called on loading and re-sizing.

jQuery

$(document).ready(function () {
    heightMan();

    $(window).resize(function () {
        heightMan();
    });
});

function heightMan() {
    var winHeight = $(window).height();
    var winHeight_50 = (winHeight / 2) - 20;

    var container_node = $('.center-cropped-img');
    var container_height = container_node.height();
    container_height = winHeight_50;

    container_node.css('height', container_height);
}

CSS Changes

.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

See in action.

Answer 4

The following solution uses CSS background-size property. The image is placed in the background. The <img> tag is used so that search engines can see the image.

/* responsive 40% wide, 4:3 aspect ratio container */
.centered-image {
  width: 40%;
  padding-top: 30%;
  background-position: center center;
  /* optional */
  margin: 1em auto;
  box-shadow: 0 0 .5em .25em black;
}
.centered-image.cropped {
  background-size: cover;
}
.centered-image.scaled {
  background-size: contain;
  background-repeat: no-repeat;
}
/* use your favorite text hiding technique */
.centered-image img {
  display: none;
}
/* miscellaneous */
body {
  margin: 0;
  padding: 0;
}
h1 {
  width: 40%;
  margin: 1em auto;
  font: bold medium monospace;
}

<h1>Cropped to Fit</h1>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
  <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
  <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
  <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
<h1>Scaled to Fit</h1>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
  <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
  <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
  <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>

Answer 5

Does this Fiddle do the right cropping?

With the following CSS we can maintain the aspect ratio of the container when resizing the window.

width: 640px;
max-width: 100%;
height: 0;
padding-bottom: 50%; // 320px or lower (half of the width)

Answer 6

Does adding this (fiddle) to .center-cropped-img achieve what you want? or do you not want to change the area that is being cropped?

    max-width: 640px;
    width: 100%;