CSS Visualizza un'immagine ridimensionata e ritagliata
-
20-08-2019 - |
Domanda
Voglio mostrare un'immagine da un URL con una certa larghezza e altezza anche se ha un rapporto di dimensioni diverso. Quindi voglio ridimensionare (mantenendo il rapporto) e quindi tagliare l'immagine alla dimensione desiderata.
Posso ridimensionare con la proprietà html img
e posso tagliare con background-image
.
Come posso fare entrambe le cose?
Esempio:
Questa immagine:
Ha le dimensioni 800x600
pixel e voglio mostrare come un'immagine di 200x100
pixel
Con 200x150px
Posso ridimensionare l'immagine <=>:
<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 <=> posso tagliare l'immagine <=> pixel.
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Mi dà:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
Come posso fare entrambe le cose?
Ridimensionare l'immagine e quindi tagliarla nel modo desiderato?
Soluzione
È 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 margin
negativo per spostare l'immagine all'interno di <div/>
.
Altri suggerimenti
Con CSS3 è possibile cambiare la dimensione di un background-image
con background-size
, raggiungendo entrambi gli obiettivi contemporaneamente.
Ci sono una serie di 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 a <div>
per coprire l'intera area del <=> contenente e taglia 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>
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/ ? redattori = 110
Ecco il CSS
e HTML
codice di 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">
.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.
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
Grazie sanchothefat.
Ho migliorato la 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>
object-fit
può aiutarti se stai giocando con<img>
tag
Il codice seguente ritaglia l'immagine per te. Puoi giocare con object-fit
img {
object-fit: cover;
width: 300px;
height: 337px;
}
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Nella classe di ritaglio, posizionare la dimensione dell'immagine che si desidera visualizzare:
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
L'html apparirà come:
<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
<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;
}
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 al valore di larghezza e altezza dell'immagine. E il ritaglio viene eseguito dalla proprietà della clip.
Per i dettagli sulla proprietà della clip seguire: http://tympanus.net/codrops/2013/ 16/01 / comprensione-the-css-clip-property /
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.
Quello che ho fatto è creare uno script lato server che ridimensionerà e ritaglierà un'immagine sul lato server in modo che invii meno dati nell'interweb.
È abbastanza banale, ma se qualcuno è interessato, posso scavare e pubblicare il codice (asp.net)
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 semplice.
La tua immagine sarebbe simile a questa 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 è solo
resize=width:200/crop=d:[0,25,200,100]
<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*/
}
Se stai usando Bootstrap, prova a usare { background-size: cover;
}
per il <div>
forse dai al div una classe dire <div class="example" style=url('../your_image.jpeg');>
in modo che diventi
div.example{
background-size: cover}
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 la miniatura, 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 da NOAA è 960 & # 215; 720 pixel, ma i primi settanta pixel sono un'area di bordo bianco superflua. Avevo bisogno di un 348 & # 215; 172 miniature, senza l'area di confine aggiuntiva nella parte superiore. 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.
&Quindi # 8230;
-
Imposta l'altezza = 172 + 19 = 191 pixel:
height = 191
-
Imposta il margine inferiore a -19 pixel (accorciando l'immagine a 172 pixel di altezza):
margin-bottom: -19px
-
Imposta la posizione superiore su -19 pixel (spostando l'immagine verso l'alto, in modo tale che le prime 19 righe di pixel superino l'amplificatore &; sono nascoste invece di quelle inferiori):
top: -19px
L'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 < a > tag, ma è possibile in stile un < div > ;, invece.
Un artefatto di questo approccio è che se mostri i bordi, il bordo superiore mancherà. Dato che uso border = 0 comunque, non è stato un problema per me.