Auto image cropping

Question

Setting up a CMS that I would like to automatically restrict images uploaded, without distorting nor setting the image as a background, as I want site visitors to be able to copy the image. Can this be done in css or javascript?

<div class="outer">
    <img src="http://2.bp.blogspot.com/-CMIQjovvgcQ/VOy4zOpkW3I/AAAAAAAAAH4/8cE_5moqRFQ/s1600/happy%2Bholi%2Bphotos.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i2.cdn.turner.com/cnnnext/dam/assets/150218160918-stress-super-169.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<div class="outer">
    <img src="http://i.telegraph.co.uk/multimedia/archive/02951/photoshopping-peg_2951334k.jpg" width="100%"/>
    <h2>title</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

css

.outer{
    width:30%;
    float:left;
    margin-right:3%;
}

https://jsfiddle.net/tonytansley/9y09b4hh/ is a crude example of the problem.

Can you be a bit more specific about what the actual problem is? — Matt Ball, Jul 28 '15 at 12:48
Sounds like you're looking for cropping script? Lots of google results for "javascript image crop" and "jquery image crop" — henry, Jul 28 '15 at 12:49
I don't want users uploading images all different shapes and sizes, but ultimately they will. So I want a way of 'Auto image cropping' so they will all be the same dimensions — Tony Ray Tansley, Jul 28 '15 at 12:50
Just looking for something simple to administer this automatically. Prefer a css solution, but simple javascript would be ok — Tony Ray Tansley, Jul 28 '15 at 12:57
Please see this [SO Answer](http://stackoverflow.com/a/11552460/85125) for possible CSS solutions. Also, the `ruby-on-rails` tag is unnecessary, please remove it. — Bart Jedrocha, Jul 28 '15 at 13:06
The [tag:ruby-on-rails] is there because I am integrating into ruby-on-rails and would welcome a solution in that medium. The link you have added does seem to be along the same lines as mine, although there doesn't seem to be any 100% supported answers. Best I will get though I suppose! — Tony Ray Tansley, Jul 28 '15 at 13:56

score 2 · Accepted Answer · answered Jul 28 '15 at 14:04

So in short, it seems that the only way to currently achieve this solution is with background-image and background-size:cover on a pre-sized div.

What looks promising (although not fully supported) is the following...

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

and

<img class="center-cropped" src="http://placehold.it/200x200" />

But until then, the background-image is the best (albeit non-SEO friendly) way to do it.

Auto image cropping

1 Answers1