Auto image cropping

Question

Настройка CMS, которую я хотел бы автоматически ограничить загруженными изображениями, не искажая и не устанавливая изображение в качестве фона, так как я хочу, чтобы посетители сайта могли копировать изображение. Это можно сделать в css или 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/ является грубым примером этой проблемы.

Answer 1

Таким образом, кажется, что единственный способ достичь этого решения - это фоновое изображение и размер фона: обложка на доразмерном div.

Что выглядит многообещающе (хотя и не полностью поддерживается) заключается в следующем ...

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

и

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

Но до тех пор, фоновое изображение является лучшим (хотя и не-SEO дружелюбный) способ сделать это.