Wie Sie ein Bild mit CSS formatieren

October 2

Wie Sie ein Bild mit CSS zu formatieren. Verwenden Sie CSS, um Ihre Website-Bilder in der bestmöglichen Weise zu präsentieren. In diesem Artikel erfahren Sie, wo Sie ein Bild einfügen und ob Dekorationen wie Grenzen gehören.

Anweisungen

Schwimmende und Zentrierung

1 Legen Sie Ihr Bild auf der Seite mit Ihrer üblichen Methode. Vergessen Sie nicht, geeigneten Alt-Text für das Bild.

2 Um Ihren Text umfließt das Bild auf der rechten Seite, ähnlich wie es ist auf dem Foto, die Einführung von diesem Artikel, verwenden Sie eine CSS-Regel wie folgt:

IMG {}Float: left;Textabstand rechts: 1em;}

Float: Left-Regel lässt das Bild auf den linken Rand verschieben. Die Polsterung-rechts-Regel verhindert, dass den Text stoßen direkt auf der rechten Seite des Bildes. Wenn eine Grenze zu diesem Bild hinzugefügt wurde, würde Abstand zwischen dem Bild und der Grenze kommen. Siehe Abschnitt 2, mit einem Bild mit einem Rahmen zu arbeiten.

3 Schwimmen Sie, damit den Text umbrochen werden auf der linken Seite, das Bild am rechten Rand. Verwenden Sie eine Regel wie folgt:

IMG {}Float: right;Textabstand links: 1em;}

4 Um ein Bild zu zentrieren, müssen Sie zuerst, die normalerweise Inline Image-Element in ein Block-Level-Element.

IMG {}Display: block;}

5 Fügen Sie anschließend die Ränder Links und rechts neben das Bild um es zu zentrieren. Der richtige Wert für den linken und rechten Rand etwas zentriert ist.

IMG {}Display: block;Rand rechts: auto;Rand Links: auto;}

Grenzen und Rändern

6 Grenzen können verwendet werden, um einen Schlagschatten-Effekt oder das Erscheinungsbild eines Frames zu erstellen.

Um die Rahmenart Nut mit dicken, rahmenartige Rahmen zu erstellen, kann in der Regel wie folgt verwendet werden:

IMG {}Float: left;die Border-Width: 1em;Rahmenart: groove;Rahmenfarbe: #000000;}

Andere Rahmenarten sind solide, punktiert, gestrichelt, Doppelbettzimmer, Ridge, Inset und Anfang an. Breite kann in Pixel, Ems oder Prozentwerte angegeben werden.

7 Grenzen können selektiv auf oben, rechts, unten und Links des Bildes angewendet werden. Sie können dieses Wissen nutzen, um einen Effekt wie ein Schlagschatten erstellen.

8 Mit einem durchgehenden Rahmen in 2 Graustufen nur rechts und die untere Rahmenlinie, erhalten Sie eine Schlagschatteneffekt.

IMG {}Float: left;Border-Right-Style: solid;Border-Right-Color: #CCCCCC;Border-Bottom-Style: solid;Border-Bottom-Color: #999999;}

9 Marge ist außerhalb der Grenze. Hinzufügen von gewissen Marge auf der rechten und unteren Rand des Bildes wird den Text verhindert dagegen stoßen.

IMG {}Float: left;Border-Right-Style: solid;Border-Right-Width: 8px;Border-Right-Color: #CCCCCC;Border-Bottom-Style: solid;Border-Bottom-Width: 8px;Border-Bottom-Color: #999999;Rand rechts: 1em;Margin-Bottom: 1em;}

Tipps & Warnungen

  • Wenn Sie Bilder in mehr als einem Unternehmensbereich (Div) einer Seite haben, verwenden Sie untergeordnete Selektoren um sie individuell zu formatieren. Möglich Selektoren: #content Img, #sidebar Img, #feature Img.

SIE KÖNNEN AUCH GERNE