Adaptive image processing

Question

I am trying to crop an image for screen sizes below a width of 768 pixels. The image should crop the same on the left and right sides.

Here is an example image in full size (image dimensions are 900px wide and 250px high:

Here is the cropped version I'm trying to create when the screen size is less than 768p. In this version, the image has a width of 320 pixels, but it should start with 768 pixels:

Here is the HTML I have used so far:

<div class="container"> <div class="image-container"> <img src="http://i.imgur.com/H7cpsLK.jpg" /> </div> </div> 

Here is the CSS:

 .container { width: 1280px; max-width: 100%; min-width: 768px; } .image-container { width:100%; } img { max-width:100%; height:auto; } @media only screen and (max-width:768px) { .image-container {max-width:768px; overflow:hidden;} } 

Here is the fiddle I used to try to create this: http://jsfiddle.net/QRLTd/

Is it possible to crop the image from both the left and the right side at the same time?

Answer 1

Live demo

HTML:

 <div class="container"> <div class="image-container"></div> </div> 

CSS

 .container { width: 100%; height:200px; } .image-container { position:relative; margin:0 auto; background:url(http://i.imgur.com/H7cpsLK.jpg) no-repeat center center; background-size:cover; max-width:768px; width:100%; height:100%; } 

Answer 2

You can always absolute position some divs left and right with a higher z-index value.

I have never used or seen cropping an image via css, but you could crop the image in paint or photoshop, upload both images, and then swap the image you want to show with css, and maybe use media queries.

Answer 3

Responsive artwork images (selective cropping / zooming) are a complex area. Fortunately, you're just trying to crop in the middle, which is a little easier. Roko's solution seems to be suitable for css, but you are still loading the full size image (slow).

If you want to further optimize and increase the speed of your page, you must download images of different sizes so that mobile browsers do not load the desktop size or worse, images with the size of the retina, image. A common solution is to replace your img.src using media query and CSS3 breakpoints and a preview of the image ready to go.

Alternatively, you can use a service like Pixtulate to run this compilation on the fly for each visitor. It will also allow you to crop the center using predefined focal points, and your images will be correctly sorted for each visitor screen.