Kleine Sektflaschen Hochzeit
CSS Bildgröße, wie füllen, nicht dehnen? Ich habe ein Bild und möchte eine bestimmte Breite und Höhe (in Pixel) festlegen. Wenn ich jedoch Breite und Höhe mit css ( width:150px; height:100px) einstelle, wird das Bild gestreckt und es kann hässlich sein. Wie fülle ich Bilder mit CSS auf eine bestimmte Größe und strecke sie nicht? VIDEO: Mit CSS das Hintergrundbild einer Webseite strecken. Beispiel für das Füllen und Strecken von Bildern: Original Bild: Gestrecktes Bild: Gefülltes Bild: Bitte beachten Sie, dass im gefüllten Bild Beispiel oben: Erstens, Bild 150x255 (beibehalten Seitenverhältnis) geändert wird, und dann, es abgeschnitten zu 150x100. Antworten: Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach cover oder contain in der background-size CSS3-Eigenschaft.. container { width: 150px; height: 100px; background-image: url ( "); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;} Während cover Sie ein vergrößertes Bild erhalten, erhalten contain Sie ein verkleinertes Bild.
scaleY, um die Höhe des Textes zu reduzieren, so dass er dem Text daneben entspricht. transform-origin, um den Text vom oberen Rand der Linie zu skalieren. margin-bottom auf einen negativen Wert gesetzt, so dass die nächste Zeile nicht weit unterschritten wird - vorzugsweise in Prozent, so dass wir die Eigenschaft line-height nicht ändern. Vertical-Align nach oben, um zu verhindern, dass der Text davor oder danach in andere Höhen schwebt (da der gestreckte Text eine tatsächliche Größe von 32px hat) - Das einfache span-Element hat eine Schriftgröße, nur als Referenz. Die Frage nach einem Weg, um die Kühnheit des Textes durch die Strecke zu verhindern, und ich habe noch keinen gegeben, aber die font-weight Eigenschaft hat mehr Werte als nur normal und fett. Ich weiß, Sie können das einfach nicht sehen, aber wenn Sie nach den passenden fonts suchen, können Sie die mehr Werte verwenden.
2. Gibt es auch andere Methoden, oder ist das im Prinzip die einzigste? #4 Die Größe ist technisch gesehen egal. Da die Grafik durch den Browser ggfs. gestreckt wird musst Du berücksichtigen, dass sie evtl. eine Mindestgröße der von dir angepeilten Mindestmaße für den Viewport hat. Wenn die Grafik z. B. nur 100x100 Pixel groß ist, der Viewport aber 990 Pixel breit ist, dann entstehen hässliche Pixelklumpen, die sicherlich nicht ansehnlich sind. Für alle modernen Browser (inkl. IE>=9) kann man statt o. g. Möglichkeit auch die Eigenschaft verwenden. #5 Wie immer der scheiß Browser IE. Diesen könnte ich sowas von... Also würde es reichen, wenn ich (außer IE halt) die Eigenschaft auf cover setze? Mindestbreite also 990px? Wie gesagt, mit Bild / Bildbearbeitung und sowas kenne ich mich net aus, eher mit dem reinen Programmieren #6 Die Mindestbreite war nur ein Beispiel. Der tatsächliche Wert hängt davon ab was Du als Zielgruppe hast, pauschal kann man das nicht sagen. Wie gesagt kann der IE>=9 auch schon background-size.