CSS Visualizza un'immagine ridimensionata e ritagliata


334

Voglio mostrare un'immagine da un URL con una certa larghezza e altezza anche se ha un rapporto di dimensioni diverse. Quindi voglio ridimensionare (mantenendo il rapporto) e quindi tagliare l'immagine alla dimensione desiderata.

Posso ridimensionare con la imgproprietà HTML e posso tagliare con background-image.
Come posso fare entrambe le cose?

Esempio:

Questa immagine:

inserisci qui la descrizione dell'immagine


Ha le dimensioni dei 800x600pixel e voglio mostrare come un'immagine di 200x100pixel


Con imgposso ridimensionare l'immagine 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">


Questo mi dà questo:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


E con background-imageposso tagliare i 200x100pixel dell'immagine .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Mi da:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


Come posso fare entrambe le cose?
Ridimensionare l'immagine e quindi tagliarla nel modo desiderato?

Risposte:


475

È possibile utilizzare una combinazione di entrambi i metodi, ad es.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Puoi usare il negativo marginper spostare l'immagine all'interno di <div/>.


9
Nota che se imposti position: relative sull'immagine contenuta, dovrai impostare position: relative sul div contenente. In caso contrario, ho scoperto che IE non ritaglierà effettivamente l'immagine.
Frank Schwieterman,

rimuovi anche l'altezza dalla classe img .crop
Waqar Alamgir

@ waqar-alamgir Non funzionerebbe se rimuovessi la dichiarazione di altezza
roborourke,

6
Inoltre, quando si utilizza css per ritagliare un'immagine, l'utente deve comunque scaricare l'immagine. Potrebbe essere meglio usare php e GD o un'altra libreria di modifica delle immagini per ridimensionare e ritagliare l'immagine prima di inviarla all'utente. Tutto dipende da cosa vuoi, caricando il server o la larghezza di banda degli utenti.
J-Rou,

15
Solo una nota per gli altri: altezza e larghezza del ritaglio definiscono dove tagliare la parte più in basso e la più a destra dell'immagine. .crop img altezza e larghezza ridimensioneranno l'immagine. .crop img margin eseguirà la panoramica dell'immagine
Frederik,

138

Con CSS3 è possibile cambiare la dimensione di un background-imagecon background-size, raggiungendo entrambi gli obiettivi contemporaneamente.

Ci sono molti esempi su css3.info .

Implementato in base al tuo esempio , utilizzando donald_duck_4.jpg . In questo caso, background-size: cover;è proprio quello che vuoi: si adatta background-imagea coprire l'intera area del contenimento <div>e ritaglia l'eccesso (a seconda del rapporto).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>


1
Ottima soluzione, ma un avvertimento è che non è compatibile con IE <9 (se questo conta più per chiunque). Inoltre, vorrei menzionare, se si sostituisce la copertina con un contenuto per la dimensione dello sfondo, verrà ridimensionata, ma non ritagliare l'immagine.
devnate il

4
Per i <img />tag, guarda object-fit: covere relativi valori dalla specifica Valori immagine CSS e modulo di contenuto sostituito Livello 3 .
Joel Purra,

111

Hai provato a usare questo?

.centered-and-cropped { object-fit: cover }

Avevo bisogno di ridimensionare l'immagine, al centro (sia in verticale che in orizzontale) e poi ritagliarla.

Sono stato felice di scoprire che poteva essere fatto in una singola linea css. Controlla l'esempio qui: http://codepen.io/chrisnager/pen/azWWgr/?editors=110


Ecco il codice CSSe HTMLda quell'esempio:

.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">


2
Grazie, penso che questo sia il modo più semplice e universale di procedere, ma non sembra funzionare con IE: / Trova i documenti qui: developer.mozilla.org/de/docs/Web/CSS/object-fit
mozzbozz

2
L'adattamento agli oggetti CSS3 non è supportato da IE11 o EDGE (14) caniuse.com/#feat=object-fit
eye-wonder

1
@ eye-wonder è supportato in Edge 16, che uscirà presto. Se non è critico e usato con parsimonia, potrebbe essere usato oggi
Ray Foss,

In CSS3, possiamo provare in entrambi i modi img + object-fit o div + background-image. Finora nella mia esperienza l'immagine di sfondo può essere utilizzata per adattarsi a più condizioni.
Eric

1
A partire da ora questo è supportato anche da Edge (non so da quando però).
Gerald Schneider,

20
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

Il div contenente essenzialmente ritaglia l'immagine nascondendo l'overflow.


13
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />

8

Grazie sanchothefat.

Ho un miglioramento nella tua risposta. Poiché il ritaglio è molto su misura per ogni immagine, questa definizione dovrebbe essere in HTML anziché CSS.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

6
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

6

object-fitpuò aiutarti se stai giocando con il <img>tag

Il codice seguente ritaglia l'immagine per te. Puoi giocare con gli oggetti

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Ha reso la mia giornata - potrei facilmente collegarlo a una diapositiva nella mia implementazione del carousel slider scorrevole - semplice soluzione di oggetto IMG e non toccare la "base di codice del plug-in di scorrimento"
andreas-supersmart

questo è il vantaggio dei CSS :)
Hidayt Rahman,

5

Esempio live: https://jsfiddle.net/de4Lt57z/

HTML:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

Spiegazione: qui l'immagine viene ridimensionata in base alla larghezza e al valore dell'altezza dell'immagine. E il ritaglio viene eseguito dalla proprietà della clip.

Per informazioni dettagliate sulla proprietà della clip, seguire: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/


4

Nella classe di ritaglio, posiziona la dimensione dell'immagine che desideri visualizzare:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

L'html sarà simile a:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

3
<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

1

Puoi inserire il tag img in un tag div e fare entrambe le cose, ma sconsiglio di ridimensionare le immagini nel browser. Fa un lavoro orribile la maggior parte delle volte perché i browser hanno algoritmi di ridimensionamento molto semplicistici. Meglio fare prima il tuo ridimensionamento in Photoshop o ImageMagick, quindi servirlo al cliente in modo carino e carino.


1

Quello che ho fatto è creare uno script lato server che ridimensionerà e ritaglierà un'immagine sul lato server in modo che invii meno dati attraverso l'interweb.

È abbastanza banale, ma se qualcuno è interessato, posso scavare e pubblicare il codice (asp.net)


Il CGI è probabilmente il metodo più portatile (ed efficiente in termini di larghezza di banda), a meno che l'OP non intenda consentire all'utente di eseguire il proprio ridimensionamento e ritaglio tramite Javascript.
Strager

1

Ci sono servizi come Filestack che farà questo per te.

Prendono l'URL dell'immagine e ti consentono di ridimensionarlo utilizzando i parametri dell'URL. È abbastanza facile

L'immagine apparirà così dopo il ridimensionamento a 200x100 ma mantenendo le proporzioni

L'intero URL appare così

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

ma la parte importante è giusta

resize=width:200/crop=d:[0,25,200,100]

inserisci qui la descrizione dell'immagine


bella spina forse - ma ugualmente - un servizio fantastico (no, non sono pagato per dirlo ;-)) - Mi sono letteralmente appena registrato ed è abbastanza bello
Jonathan Lyon

1

Prova a usare la clip-pathproprietà:

La proprietà clip-path consente di tagliare un elemento in una forma base o in una sorgente SVG.

Nota: la proprietà clip-path sostituirà la proprietà clip obsoleta.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

Altri esempi qui .


0
<div class="crop">
    <img src="image.jpg"/>
</div>
.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

0

Se stai usando Bootstrap, prova a usare { background-size: cover; }per <div>forse dare al div una lezione in <div class="example" style=url('../your_image.jpeg');>modo che diventi div.example{ background-size: cover}


0

Ho dovuto farlo di recente. Volevo creare un collegamento in miniatura a un grafico NOAA. Dal momento che il loro grafico poteva cambiare in qualsiasi momento, volevo che la mia anteprima cambiasse con essa. Ma c'è un problema con il loro grafico: ha un enorme bordo bianco nella parte superiore, quindi se lo ridimensioni per creare l'anteprima finisci con uno spazio bianco estraneo nel documento.

Ecco come l'ho risolto:

http://sealevel.info/example_css_scale_and_crop.html

Per prima cosa dovevo fare un po 'di aritmetica. L'immagine originale di NOAA è di 960 × 720 pixel, ma i settanta pixel principali sono un'area di bordo bianco superflua. Avevo bisogno di una miniatura di 348 × 172, senza l'area del bordo aggiuntiva in alto. Ciò significa che la parte desiderata dell'immagine originale è alta 720 - 70 = 650 pixel. Avevo bisogno di ridimensionarlo fino a 172 pixel, ovvero 172/650 = 26,5%. Ciò significava che il 26,5% di 70 = 19 righe di pixel doveva essere eliminato dalla parte superiore dell'immagine ridimensionata.

Così…

  1. Imposta l'altezza = 172 + 19 = 191 pixel:

    altezza = 191

  2. Imposta il margine inferiore a -19 pixel (accorciando l'immagine a 172 pixel di altezza):

    margin-bottom: -19px

  3. Imposta la posizione superiore su -19 pixel (spostando l'immagine verso l'alto, in modo che le prime 19 righe di pixel traboccino e vengano nascoste invece di quelle inferiori):

    top: -19px

Il codice HTML risultante è simile al seguente:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

Come puoi vedere, ho scelto di dare uno stile al tag <a> contenente, ma invece potresti definire uno <div>.

Un artefatto di questo approccio è che se mostri i bordi, mancherà il bordo superiore. Dato che uso border = 0 comunque, non è stato un problema per me.


0

Puoi utilizzare il servizio di ridimensionamento delle immagini di Kodem . Puoi ridimensionare qualsiasi immagine con una sola chiamata http. Può essere utilizzato casualmente nel browser o utilizzato nell'app di produzione.

  • Carica l'immagine dove preferisci (S3, imgur ecc.)
  • Collegalo al tuo URL API dedicato (dalla nostra dashboard)
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.