Percentuale di ridimensionamento dell'immagine CSS di se stessa?

109

Sto provando a ridimensionare un'immagine con una percentuale di se stessa. Ad esempio, voglio solo ridurre la metà dell'immagine ridimensionandola al 50%. Ma l'applicazione width: 50%;ridimensionerà l'immagine per essere il 50% dell'elemento contenitore (l'elemento genitore che potrebbe essere <body>ad esempio).

La domanda è: posso ridimensionare l'immagine con una percentuale di se stessa senza usare javascript o lato server? (Non ho informazioni dirette sulla dimensione dell'immagine)

Sono abbastanza sicuro che non puoi farlo, ma voglio solo vedere se esiste una soluzione solo CSS intelligente. Grazie!

html css image

— Min Ming Lo
fonte

Se lo usi, occuperà la percentuale dell'elemento contenitore width: <number>%. Non credo ci sia un modo per farlo!

— Aniket

111

Ho 2 metodi per te.

Metodo 1. demo su jsFiddle

Questo metodo ridimensiona l'immagine solo visivamente, non le dimensioni effettive in DOM, e lo stato visivo dopo il ridimensionamento centrato nel mezzo della dimensione originale.

html:

<img class="fake" src="example.png" />

css:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

Nota di supporto del browser : le statistiche dei browser mostrate in linea incss.

Metodo 2. demo su jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

css:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

Nota: img.normal edimg.fakeè la stessa immagine.
Nota di supporto del browser: questo metodo funzionerà in tutti i browser, poiché tutti i browser supportano lecssproprietà utilizzate nel metodo.

Il metodo funziona in questo modo:

#wrape #wrap img.fakeavere flusso
#wrapha in overflow: hiddenmodo che le sue dimensioni siano identiche all'immagine interna ( img.fake)
img.fakeè l'unico elemento all'interno #wrapsenza absoluteposizionamento in modo da non interrompere il secondo passaggio
#img_wrapha il absoluteposizionamento all'interno #wrape si estende in termini di dimensioni all'intero elemento ( #wrap)
Il risultato del quarto passaggio è che #img_wrapha le stesse dimensioni dell'immagine.
Impostando width: 50%su img.normal, la sua dimensione è 50%pari a #img_wrap, e quindi 50%della dimensione dell'immagine originale.

— Vladimir Starkov
fonte

Questo non ridimensiona l'immagine al 50% delle sue dimensioni originali, ora è il 50% del genitore di img_wrap ..

— Wesley

Vedi la mia risposta aggiornata per un tentativo di risolvere il problema. Cosa ne pensi?

— Wesley

Penso che dovrebbe essere possibile utilizzare display: nessuno al posto della visibilità, come nel mio codice. Nel tuo esempio, lo spazio per la falsa immagine nascosta è ancora "riservato", il che rovina il flusso se ci mettessi dei contenuti intorno

— Wesley

è impossibile, perché il trucco principale è in due tag annidati e float.

— Vladimir Starkov

1

La transform:scale()soluzione ha però un grosso problema. Non interagisce bene con il box model CSS. Con questo intendo che non lo fa interagire con esso a tutti , in modo da ottenere il layout che sembra tutto sbagliato. Vedi: jsfiddle.net/kahen/sGEkt/8

— kahen

46

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

Questa deve essere una delle soluzioni più semplici utilizzando l'approccio dell'elemento contenitore.

Quando si utilizza l'approccio dell'elemento contenitore, questa domanda è una variazione di questa domanda . Il trucco è lasciare che l'elemento contenitore rimpicciolisca l'immagine figlia, così avrà una dimensione uguale a quella dell'immagine non dimensionata. Pertanto, quando si imposta la widthproprietà dell'immagine come valore percentuale, l'immagine viene ridimensionata rispetto alla sua scala originale.

Alcune delle altre proprietà con film termoretraibili di abilitazione ei valori delle proprietà sono: float: left/right, position: fixede min/max-width, come menzionato nella domanda collegata. Ognuno ha i suoi effetti collaterali, ma display: inline-blocksarebbe una scelta più sicura. Matt ha menzionato float: left/rightnella sua risposta, ma lo ha erroneamente attribuito a overflow: hidden.

Demo su jsfiddle

Modifica: come menzionato dal trojan , puoi anche sfruttare il modulo di ridimensionamento intrinseco ed estrinseco CSS3 recentemente introdotto :

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

Tuttavia, non tutte le versioni di browser più diffuse lo supportano al momento della scrittura .

— Comunità
fonte

@ Qualcuno come risolvere i bordi non collassati? violino

— CdR

Questo era proprio quello di cui avevo bisogno ... qualcosa di semplice e veloce, grazie. L'ho usato in questo modo: HTML: <img src="https://www.google.com/images/srpr/logo11w.png"/> CSS: img { display: inline-block; width: 15%; }

— Chnikki

Per i futuri lettori: il valore corretto su cui impostare figureè width: fit-content;fin d'ora. Anche il supporto del browser è molto migliore oggi.

— Dániel Kis-Nagy

12

Prova la zoomproprietà

<img src="..." style="zoom: 0.5" />

Modifica: a quanto pare, FireFox non supporta la zoomproprietà. Dovresti usare;

-moz-transform: scale(0.5);

per FireFox.

— Emir Akaydın
fonte

4

Non esiste una proprietà CSS come "zoom" e non è supportata da nessuno tranne IE. È una cosa proprietaria di Microsoft e non standard.

— Rob

9

Purtroppo, questa informazione è obsoleta. Zoom è attualmente supportato dai browser Internet Explorer, Chrome e Safari. FireFox e Opera non lo supportano ancora. Ecco perché ho aggiunto la parte di modifica. IE è il primo a supportarlo ma non l'unico.

— Emir Akaydın

Secondo questo link, anche Opera sembra supportare lo zoom. FireFox è l'unico che non supporta. fix-css.com/2011/05/css-zoom

— Emir Akaydın

2

Ecco perché IE ha perso metà della sua quota di mercato negli ultimi 8 anni. Se non puoi contare in modo affidabile sui browser per supportare qualcosa, non hai un terreno comune. La specifica è scritta dagli stessi fornitori di browser. Se non lo inseriscono lì, non fare affidamento su di esso o scriverai più righe di markup come hai fatto. Questo non è di nuovo il 1998.

— Rob

1

non so se l'hai notato ma "zoom" è supportato da Internet Explorer, Chrome, Safari e Opera. questa è la prova che "zoom" non è specifico del fornitore. solo FireFox è diverso. quindi ripeto la mia domanda. qual è la soluzione pulita con proprietà CSS compatibile? la mia risposta è la migliore risposta finché qualcuno non trova una soluzione standard adeguata.

— Emir Akaydın

5

Un'altra soluzione è utilizzare:

<img srcset="example.png 2x">

Non verrà convalidato perché l' srcattributo è obbligatorio, ma funziona (tranne su qualsiasi versione di IE perché srcsetnon è supportato).

— benface
fonte

2

Questo in realtà è possibile, e l'ho scoperto quasi per caso durante la progettazione del mio primo sito di responsive design su larga scala.

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

L'overflow: hidden fornisce l'altezza e la larghezza del wrapper, nonostante il contenuto fluttuante, senza utilizzare l'hack clearfix. È quindi possibile posizionare il contenuto utilizzando i margini. Puoi anche rendere il div wrapper un blocco in linea.

— opaco
fonte

2

Questo è un thread molto vecchio ma l'ho trovato mentre cercavo una soluzione semplice per visualizzare l'acquisizione dello schermo retina (ad alta risoluzione) su un display a risoluzione standard.

Quindi esiste una soluzione solo HTML per i browser moderni:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

Questo indica al browser che l'immagine è il doppio delle dimensioni di visualizzazione previste. Il valore è proporzionale e non è necessario che rifletta la dimensione effettiva dell'immagine. Si può usare anche 2w 1px per ottenere lo stesso effetto. L'attributo src viene utilizzato solo dai browser legacy.

L'effetto piacevole è che mostra le stesse dimensioni sulla retina o sul display standard, restringendosi su quest'ultimo.

— Max_B
fonte

0

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

Questa soluzione utilizza js e jquery e ridimensiona in base solo alle proprietà dell'immagine e non a quella genitore. Può ridimensionare una singola immagine o un gruppo basato su parametri di classe e id.

per ulteriori informazioni, vai qui: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— Jenny Vallon
fonte

0

Questo è un approccio non difficile:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

— nickthehero
fonte

0

In realtà la maggior parte delle risposte qui non ridimensiona l'immagine alla larghezza di se stessa .

Abbiamo bisogno di una larghezza e un'altezza di auto imgsull'elemento stesso in modo da poter iniziare con la sua dimensione originale.

Dopo di che un elemento contenitore può ridimensionare l'immagine per noi.

Semplice esempio HTML:

<figure>
    <img src="your-image@2x.png" />
</figure>

Ed ecco le regole CSS. In questo caso utilizzo un contenitore assoluto:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

Puoi modificare il posizionamento dell'immagine con regole come transform: translate(0%, -50%);.

— Floris
fonte

-1

Penso che tu abbia ragione, semplicemente non è possibile con CSS puro per quanto ne so (non cross-browser intendo).

Modificare:

Ok non mi è piaciuta molto la mia risposta, quindi ho lasciato un po 'perplesso. Potrei aver trovato un'idea interessante che potrebbe aiutare .. forse è possibile dopo tutto (anche se non è la cosa più carina in assoluto):

Modifica: testato e funzionante in Chrome, FF e IE 8 e 9. . Non funziona in IE7.

jsFiddle esempio qui

html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

— Wesley
fonte

il tuo esempio ridimensiona l'immagine in modo non proporzionale

— Vladimir Starkov

Il tuo metodo consente di ridurre l'immagine attraverso il ridimensionamento della finestra

— Vladimir Starkov

è perché stai usando inline-block, ecco perché la larghezza #img_wrapdipende non solo dalla larghezza interna dell'html, ma anche dalla larghezza del contenitore del contesto.

— Vladimir Starkov

Per quanto ne so, quel display: nessuna immagine non fa nulla e può essere rimossa. Oppure mi sfugge qualcosa?

— tremby