Erzeugt zwei Hintergrundbilder neben divs mit CSS

8

Ich habe Schwierigkeiten damit, zwei Hintergrundbilder synchron zueinander zu verkleinern, so dass mein Sitzplan auf Mobilgeräten / Tablets funktioniert.

Ich habe Hintergrundabdeckung versucht, enthalten, 100% und andere div-Werte auf 100% setzen, aber keine Freude daran, diese Sitze an ihrem Platz zu halten.

So muss nicht nur das Hintergrundbild für den Sitzplan unter 650px verkleinert werden, sondern auch die Sitzbilder - sie müssen ihre Position auf dem Sitzplan beibehalten. Die enthaltenen divs sind derzeit auf 15px eingestellt, um die Sitzbilder anzuzeigen.

Hier ist der ursprüngliche statische Breitencode, mit dem ich arbeite Ссылка

Die Sitzgrößen sollten 15px groß sein, bis der Sitzplan 650px unterschreitet, dann schrumpfen die Sitzbilder synchron mit dem Hauptbild des Sitzplans, bleiben aber in der gleichen Position und Proportion.

%Vor% %Vor%
    
me9867 27.10.2016, 09:50
quelle

2 Antworten

4

es gibt eine Menge Fehler auf Ihrem CSS. Geben Sie keine feste Breite auf Ihren Container, wenn Sie darauf reagieren möchten. Ich habe deine Geige bearbeitet und kam dabei auf: Ссылка

%Vor%

Sieh dir vorher den Pseudo Selektor an. es hat den Trick gemacht!

    
Ron.Basco 28.10.2016, 10:03
quelle
4

Ethan Marcotte hat ausführlich über responsive Hintergrundbilder geschrieben. Sie können viel auf seinem Blog lesen oder hier. .

Sie möchten grundsätzlich folgende Eigenschaften für Ihr Hintergrundbild festlegen:

  1. Setzen Sie die Eigenschaft display des Elements #image auf Inline-Block. Ohne diese Eigenschaft zeigt CSS das Element <span> als Inline an und wir können ihm keine Breite oder (in einer Minute) eine Höhe geben.
  2. Setzen Sie die Breite dieses Elements auf 100%, so dass unser Bild das enthaltende <div> .
    3. ausfüllt
  3. Legen Sie die Eigenschaften font-size und line-height auf 0 fest, damit die Inhalte innerhalb des Bereichs nicht in ihre Größe eingerechnet werden.
  4. Legen Sie die Eigenschaft "vertikal ausrichten" auf "Mitte" fest, um das Bildelement im content <div> vertikal zu zentrieren. Setzen Sie die Eigenschaft background-size auf 100%, damit unser Bild das Bildelement ausfüllt.
  5. Setzen Sie die Eigenschaft background-position auf 50% 50%, um das Hintergrundbild innerhalb des Bildelements auszurichten.
  6. Setzen Sie die Eigenschaft background-repeat auf no-repeat, um zu verhindern, dass der Browser das Bild horizontal oder vertikal kachelt.

Wenn Sie diesen Ansatz für Ihr überlagertes und das darunter liegende Bild verwenden und beide die gleiche Größe haben, sollten Sie keine Probleme mit der Ausrichtung haben.

Medienabfragen helfen Ihnen dann beim Umgang mit verschiedenen Bildschirmgrößen.

    
edlee 27.10.2016 10:10
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Wie können Zeichenliterale eingebunden werden?