Regolare le dimensioni dell’immagine in base alla dimensione del carattere

Sto mettendo insieme una pagina HTML per essere vista in entrambi i telefoni cellulari e PC/Mac. Nel testo, a volte ho le immagini inline:

<p>to do that, then press on button <img src="button.png" /> for 2 seconds</p>

Mio font di dimensioni in em o % in modo che sia leggibile sia a bassa risoluzione-telefoni cellulari e di alta-res i telefoni. Il problema è che il mio pulsanti (di solito 32px immagini di alta qualità) appaiono così piccolo in alto-res i telefoni.

Come faccio a regolare la dimensione dell’immagine? Preferibilmente puro CSS, JS ma è ancora OK.

Se il paragrafo è solo andare a essere sola linea, impostare la linea di altezza per 32px (ems), quindi impostare le immagini di larghezza per auto e l’altezza al 100%. Questo dovrebbe, in teoria, scala di immagini la dimensione del carattere cambia.

OriginaleL’autore Memes | 2013-08-26

1 risposta

  1. 3

    Si può dare a tutti le immagini di una classe e di applicare la seguente regola css

    <p>to do that, then press on button <img class="scale" src="button.png" /> for 2 seconds</p>
    
    .scale
    {
        height: 1em; 
        width: 1em;
    }

    OriginaleL’autore Thanos

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *