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

When I reduce the size of the web browser window, the centre cropped image does not scale down nicely. Instead, it maintains it's fixed height and width and spills out of the view-port. The problem is perhaps demonstrated more clearly with a Fiddle.

How can I make the centre cropped image scale down nicely? Ideally the centre cropped image will scale down nicely while still being cropped and maintaining a similar aspect ratio.

.centered-container {
  max-width: 960px;
  margin: auto;
}
.center-cropped-img {
  width: 640px;
  height: 360px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px red solid;
  position: relative;
}
.center-cropped-img img {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

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

Again, here is a Fiddle that perhaps demonstrates the problem better than in prose.

score 2 · Answer 1 · answered Oct 31 '14 at 05:06

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)*/
}

KreaTief · Answer 2 · 2014-10-30T20:08:32.520

Use the padding hack. U need a container, which you set to be a width in percent, height of 0 and padding on the bottom to create the aspect ratio you are looking for. If you can set your image as a background it's even easier.

I have written a sass mixin for that, and also a small tutorial on my blog which comes with a little more extensive explanation: http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html

If you need to have your image in an image tag, let me know, it's possible as well, but not as fast

score 1 · Answer 3 · answered Oct 30 '14 at 20:16

1

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

answered Oct 30 '14 at 20:16

knighter

1,137
8
13

score 1 · Answer 4 · answered Oct 30 '14 at 20:51

1

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)

answered Oct 30 '14 at 20:51

pbaldauf

1,671
2
23
32

Salman A · Answer 5 · 2014-11-01T15:22:12.740

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>

The drawback of this technique seems to be that you can only crop your image equally on the left/right OR equally on the top/bottom. Any suggestions on how to do both and crop more precise? — Rob Monhemius, Nov 01 '14 at 18:29
I thought OP wants to scale, then crop. He already has the code which crops all sides equally. — Salman A, Nov 02 '14 at 05:55

score 1 · Answer 6 · answered Nov 05 '14 at 12:29

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.

Abhinav · Answer 7 · 2017-02-21T11:44:28.783

-3

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

edited Feb 21 '17 at 11:44

answered Oct 25 '14 at 21:14

Abhinav

1
3

... Setting the `width` actually works very nicely but like I mentioned, setting the `height` does not. – Caster Troy Oct 25 '14 at 22:01
Try height :auto and width in % – Abhinav Oct 27 '14 at 10:35

How to make centre cropped image responsive?

7 Answers7

Linked