Wie wähle ich die Bildhöhe für ein Hintergrund-Cover-Div aus?

Ich habe auf meiner Seite einen Schieberegler mit der Eigenschaft "Hintergrundabdeckung" angewendet, damit er zum Ganzen passt. Der Slider hat auch eine feste Höhe von 50vh. Der Hintergrund schneidet immer Dinge aus dem Bild ab, die ich nicht möchte. Wie sollte ich bei der Auswahl der richtigen Breite x Höhe vorgehen, wenn ich weiß, dass die Website auf sehr unterschiedlichen Geräten angezeigt wird?

Das Lesen der Dokumente sollte helfen. Aber da es keinen Code zum Debuggen gibt und nicht klar ist, was Sie wollen, können wir Ihnen nicht wirklich helfen. Fragen wie diese würden wahrscheinlich sowieso besser auf StackOverflow passen
Finden Sie die maximale Höhe heraus, die jemals auf dem größten Bildschirm angezeigt wird (von 800-1200 px) und machen Sie Ihr Bild so hoch x 4-mal so breit. (also h1000px x w4000px). Vergessen Sie die Kontrolle des genauen Inhalts oder der Ränder des Bildes. Es muss ein großes allgemeines Feld mit den besten Sachen in der Mitte oben sein. Erwarten Sie, dass es stark beschnitten wird, immer zentriert mit festem Oberteil. Telefone sehen nur einen schmalen mittleren oberen Abschnitt. Große Bildschirme werden das Ganze sehen.
@Webster Bitte vermeiden Sie es, Fragen in den Kommentaren zu beantworten. Dies ist eine Antwort, die ich positiv bewerten würde. Danke.
Dies ist viel zu weit gefasst und unklar, um in irgendeiner Weise beantwortet werden zu können. Wie könnten wir wissen, welche Breite oder Höhe ein Element in Ihrem Design hat, wenn wir keine Ahnung haben, wie es aussehen soll?

Antworten (2)

Zuallererst, wenn Ihre Website auf vielen verschiedenen Geräten angezeigt werden soll, sollten Sie relativ widthzu den Elementen verwenden. Sie stellen das heightauf Ihrem Schieberegler ein, damit es dieser Regel gehorcht und einen Teil des Banners abschneidet, um Bildverzerrungen zu vermeiden.

  • Verwenden Sie das viewportMeta-Tag, um die Breite des body-Elements so einzustellen, dass sie der Breite Ihres Geräts entspricht. <meta name="viewport" content="width=device-width, inicial-scale=1">Dies wird Ihnen bei einigen anderen Reaktionsproblemen helfen.
  • Verwenden Sie die widthEigenschaft, um Ihre Elemente zu dimensionieren: Bleiben Sie bei relativen Werten wie 100% , 75% usw.
  • Erstellen Sie, media queriesum zu verhindern, dass Ihr Banner auf großen Bildschirmen zu groß aussieht.

Mehr zum Thema Responsive Webdesign erfahren Sie hier

Sie haben einen Schieberegler mit einer Höhe von 50 vh (50 % der Höhe des Ansichtsfensters). Wenn sich also die Bildschirmgröße ändert, ändert sich die Schiebereglergröße. Daher ist es schwierig, ein Rasterbild (png, jpg) anzupassen, das überall dasselbe Seitenverhältnis beibehält. Sie können entweder die Höhe des Schiebereglers festlegen und dann ein Bild entsprechend dieser Höhe auswählen oder einige vektorbasierte Bilder im Schieberegler verwenden.

Wie wähle ich die Bildhöhe für ein Hintergrund-Cover-Div aus?
AntwortenHierDatenschutz-Bestimmungen1y, 0v