Wie ein Bild mit CSS proportional skaliert

Web-Browser skalieren automatisch, Bildbreite oder-Höhe je nachdem ob eine Breite oder Höhe in Cascading Style Sheets (CSS) Code festgelegt wurde. Wenn Sie auf Breite skalieren möchten, legen Sie beispielsweise eine Breite und der Browser kümmert sich der passenden Höhe. Einstellen nur eine Höhe verursacht auch den Browser mit einer Breite verwenden, die im Verhältnis zu dieser Höhe. Obwohl Bildgrößenanpassung am besten den grafischen Editor Programme aus Gründen der Dateigröße und Dehnung oder Anquetschen überlassen ist, können Sie diesen Trick um die Größe der Bilder in CSS on the Fly und halten sie in Anteil.

Anweisungen

1 Gehen Sie zu "Start" auf der Windows-Taskleiste und geben Sie ein "Notepad" oder den Namen von einem Code-Editor in die Suchleiste. Drücken Sie die "Enter"-Taste zum Starten des Programms. Navigieren Sie zu "File" und öffnen Sie die Datei mit dem Code für Ihre Webseite, die höchstwahrscheinlich eine HTML-Datei ist.

2 Suchen Sie die "< Link >"-Tags am Anfang der Code für die Datei und suchen Sie in den Inhalt der entsprechenden "Href"-Attribute für alle CSS-Dateien. Wenn Sie den Namen einer CSS-Datei finden, gehen Sie zurück auf "Datei" auf der Symbolleiste und öffnen Sie diese Datei. Sie haben nun zwei Dateien öffnen: eine für Ihre Webseite und eine für CSS. Wenn Sie nicht über eine CSS-Datei verfügen, erstellen und den Code für Ihre Webseite zwischen den "< Head >" Tags "< Link >"-Tag hinzufügen:

< link Rel = "Stylesheet" href="path/to/style.css" Type = "Text/Css" / >

3 Erhalten Sie den ID-Namen für dein Bild anhand seiner "< Img >" Tag im Code für die Webseite:

< Img Alt = "Ein Bild" Id = "Myimage" / >

Im obigen Code ist "Myimage" den ID-Namen. Fügen Sie einen ID-Namen "< Img >"-Tag, wenn noch nicht vorhanden ist.

4 Gehen Sie zum Ende der CSS-Datei und Schreiben eines Selektors um "wählen das Bild mit dem ID-Namen":

MyImage {} Eigenschaft / Wert-Paare gehen innerhalb der geschweiften Klammern. Das ist, platzieren Sie Code zum Ändern der Größe des Bildes.

5 Fügen Sie entweder eine Höhe oder Breite dem CSS-Code:

MyImage {Width: 300px;} MyImage {Height: 200px;} Oben ist ein Beispiel für jede Art von Einstellung. Wenn Sie eine Breite ohne eine Höhe festlegen, berechnet der Browser automatisch die Höhe skalieren. Auch ist das Gegenteil der Fall.

Tipps & Warnungen

• Verwenden Sie den folgenden Code (ohne Anführungszeichen) zu Internet Explorer eine bessere Resize-Methode zu verwenden: "Img {-ms-Interpolation-Modus: bikubische;}".
• Bildgrößenanpassung getan in einem Grafikeditor ist noch besser, es in CSS, zu tun, vor allem, wenn Sie ein großes Bild zu skalieren. Bei einem großen Bild dauert es noch genauso lange wie laden, auch wenn die verkleinerte.