Passen Sie die Bildgröße auf der Basis der Schriftgröße

Ich bin die Zusammenstellung einer HTML-Seite angezeigt werden, die in Mobiltelefonen und PC/Mac. In dem text, manchmal habe ich inline-Bilder:

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

Meine fonts Größe in em oder %, so dass es lesbar ist auf beiden low-res-Telefonen und high-res-Handys. Das Problem ist, dass meine buttons (in der Regel 32px hoch Bilder) angezeigt werden, so tiny auf high-res-Handys.

Wie passe ich die Bildgröße? Vorzugsweise reines CSS, aber JS ist auch noch OK.

Wenn Ihr Absatz ist nur eine einzige Linie, stellen Sie die Zeilenhöhe auf 32px (ems), dann die Bilder, die Breite auf auto und die Höhe auf 100%. Dies sollte in der Theorie, skalieren Sie Ihre Bilder wie die Schriftgröße verändert.

InformationsquelleAutor Memes | 2013-08-26

  1. 3

    Können Sie geben alle Ihre Bilder Klasse und wenden Sie die folgende css-Regel

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

.scale
{
    height: 1em; 
    width: 1em;
}

    InformationsquelleAutor Thanos

Schreibe einen Kommentar