Benutzer laden Fotos hoch, und die Größe des Fotos ist unbekannt. muss proportional vergrenzt werden. Wie unten gezeigt.
Wenn Sie einen Blick darauf werfen, können Sie Text-Align: Center verwenden, um dies zu erreichen. Im Verhältnis können die Breiten- und Höhenattribute, die voreingestellter <img /> verwenden, nicht gelöst werden. Weil Benutzerbilder sehr lang oder sehr breit sein können. Ich habe online über ihre Beziehung nachgedacht und beurteilt, dass dies wie folgt ist:
if (tatsächliche Breite> Vorschau der maximalen Breite) {
Skalierungsbreite = maximale Breite der Vorschau
}
if (tatsächliche Höhe> Vorschau maximale Höhe) {
Skalierungshöhe = Vorschau maximale Höhe
}
Es wird jedoch Probleme geben. Um es proportional skaliert zu lassen, müssen verschiedene Urteile getroffen werden. Dann verstößt es gegen das Prinzip unserer Hoffnung auf Automatisierung. Denken Sie noch einmal darüber nach, obwohl Sie Mathematik nicht mögen, aber Mathematik ist immer noch sehr nützlich, sollte es andere Möglichkeiten geben. Wenn es proportional skaliert ist, verwenden Sie nicht den Anteil der tatsächlichen Bilder und Vorschaltflächenbreiten, um ihre Beziehung zu berechnen? Hmmmm ... wirklich in Ordnung. Tatsächlich müssen wir nur Breite oder Höhe zoomen. Weil der Anteil nur groß und klein ist. Schreiben Sie insbesondere eine Funktion, um sie zu implementieren:
Kopieren Sie den Code -Code wie folgt:
/**
* Das Bild wird in adaptivem Verhältnis vergrößert
* @param img {element} Bilder, die vom Benutzer hochgeladen wurden
* @param maxwidth {number} Die maximale Breite des Vorschaufelsbereichs
* @param maxheight {number} Die maximale Höhe des Vorschaufelsbereichs
*/
Var resizeImg = Funktion (IMG, MaxWidth, maxheight) {
var w = img.width,
H = img.head;
// Wenn das Bild keine Änderungen vornimmt als die Stunden der Vorschauerbereiche
if (w <maxwidth && h <maxheight) return;
// Wenn das tatsächliche Bildverhältnis größer ist als der Anteil der Breite und Höhe der Vorschauderfläche
// Bildbreite skalieren, sonst Skalierungsbildbreite
w/h> MaxWidth/MaxHeight?