Come ritagliare e centrare automaticamente un’immagine

Data qualsiasi immagine arbitraria, voglio ritagliare un quadrato dal centro dell’immagine e visualizzarlo all’interno di un quadrato dato.

Questa domanda è simile a questa: CSS Mostra un’immagine ridimensionata e ritagliata , ma non conosco la dimensione dell’immagine, quindi non posso usare i margini impostati.

Una soluzione consiste nell’utilizzare un’immagine di sfondo centrata all’interno di un elemento dimensionato per le dimensioni ritagliate.


Esempio di base

.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; } 
 

Stavo cercando una soluzione CSS pura usando i tag img (non il modo immagine di sfondo).

Ho trovato questo modo geniale per raggiungere l’objective sulle miniature di ritaglio con css :

 .thumbnail { position: relative; width: 200px; height: 200px; overflow: hidden; } .thumbnail img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .thumbnail img.portrait { width: 100%; height: auto; } 

È simile alla risposta di @Nathan Redblur ma consente anche le immagini di ritratto.

Funziona come un fascino per me. L’unica cosa che devi sapere sull’immagine è se è .portrait o orizzontale per impostare la class .portrait , quindi ho dovuto usare un po ‘di Javascript per questa parte.

Esempio con tag img ma senza background-image

Questa soluzione mantiene il tag img modo da non perdere la capacità di trascinare o fare clic con il pulsante destro del mouse per salvare l’immagine, ma senza l’immagine di background-image centrare e ritagliare semplicemente con css.

Mantenere il rapporto di aspetto bene tranne nelle immagini molto alte. (controlla il link)

(visualizza in azione)

markup

 

CSS

 div.center-cropped { width: 100px; height: 100px; overflow:hidden; } div.center-cropped img { height: 100%; min-width: 100%; left: 50%; position: relative; transform: translateX(-50%); } 

Prova questo: imposta le dimensioni del ritaglio dell’immagine e utilizza questa linea nel tuo CSS:

 object-fit: cover; 

Ho creato una direttiva angularjs usando le risposte di @ Russ’s e @ Alex

Potrebbe essere interessante nel 2014 e oltre: P

html

 

js

 angular.module('croppy', []) .directive('croppedImage', function () { return { restrict: "E", replace: true, template: "
", link: function(scope, element, attrs) { var width = attrs.width; var height = attrs.height; element.css('width', width + "px"); element.css('height', height + "px"); element.css('backgroundPosition', 'center center'); element.css('backgroundRepeat', 'no-repeat'); element.css('backgroundImage', "url('" + attrs.src + "')"); } } });

collegamento di violino

Prova questo:

 #yourElementId { background: url(yourImageLocation.jpg) no-repeat center center; width: 100px; height: 100px; } 

Tieni presente che la width e l’ height funzioneranno solo se il tuo elemento DOM ha un layout (un elemento visualizzato in blocco, come un div o un img ). Se non lo è (ad esempio, ad esempio), aggiungi display: block; alle regole CSS. Se non hai accesso ai file CSS, rilascia gli stili in linea nell’elemento.

C’è un altro modo per ritagliare l’immagine centrata:

 .thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;} .thumbnail img{ position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px; width: auto !important; height: 100% !important; margin: auto; } .thumbnail img.vertical{width: 100% !important; height: auto !important;} 

L’unica cosa di cui avrai bisogno è aggiungere la class “verticale” alle immagini verticali, puoi farlo con questo codice:

 jQuery(function($) { $('img').one('load', function () { var $img = $(this); var tempImage1 = new Image(); tempImage1.src = $img.attr('src'); tempImage1.onload = function() { var ratio = tempImage1.width / tempImage1.height; if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical'); } }).each(function () { if (this.complete) $(this).load(); }); }); 

Nota: "! Important" è usato per sovrascrivere eventuali attributi width, height sul tag img.