Responsive div mit Breite und Höhe festgelegt

Ich bin mit foundation 4 als Rahmen für meine persönliche Website (nicht 100% portfolio-Website, mehr als Werbung für mich als Freiberuflerin), und ich habe eine Kontakt-box mit einem hintergrund-Bild festlegen und diese CSS-Stile angewendet:

#contact-box {width: 1052px;
      height: 400px;
      background-image: url('../images/contact-bg.png');
      margin-top: 150px;}

Möchte ich es so machen, es verkleinert sich beim verkleinern der browser, sondern es macht mir einfach eine horizontale Bildlaufleiste angezeigt und nicht skaliert, und ich weiß, dass es ist, weil der 1052px Breite einstellen... Also wie sollte ich das code dieser aus, so ist es responsive? Wenn ich maximale Breite und maximale Höhe, bricht es das div-Element und entfernt seine bg Bild. Die Kontakt-box hat ein Kontakt-Formular (die anspricht) zusammen mit einer Telefon-Nummer, E-Mail, und 3 soziale Symbole.

InformationsquelleAutor user2353287 | 2013-05-06

  1. 1

    Gerade wollte ich einen Kommentar hinterlassen, aber ich weiß nicht scheinen, um die option..

    Ich weiß nicht, ob dies ist die Antwort, die Sie wollen, aber normalerweise mache ich hintergrund Bilder skalieren, um die Größe des Fensters mit code wie diesem:

    width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100%;
margin-top: 150px;

    Können Sie css-code für die div-tags und die Seite Körper, obwohl in meinem Experiment die Werte für Breite und Höhe sind nicht notwendig, die Seite Körper. Dadurch behalten Sie das Seitenverhältnis Ihres Hintergrunds und sollte es ermöglichen, zu skalieren, mit dem Fenster.

    Seit dem oben genannten Beispiel behält das Seitenverhältnis, wird das Bild vertikal skalieren bis zu dem Punkt, wo es überschreitet die Größe des Containers ist es in und wird abgeschnitten erscheinen auf der Unterseite. Alternativ können Sie Folgendes verwenden:

    width: 100%;
height: 400px;
background-image: url('../images/contact-bg.png');
background-size: 100% 400px;
margin-top: 150px;

    Das zweite argument für die hintergrund-Größe element stellen Sie sicher, dass das Bild nie Schuppen senkrecht auf allen. Diese Methode wird jedoch dazu führen, dass dein hintergrund-Bild wird horizontal gestreckt, wenn die Fensterbreite überschreitet der Aspekt bewahrt Breite des Bildes, die Sie verwenden.

    Hoffe, das hilft! 🙂

    InformationsquelleAutor Sheriff_McLawDog

  2. 1

    Können Sie versuchen, diese und ändern Sie es Ihr nach Quelle hier http://css-tricks.com/perfect-full-page-background-image/

    img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

    - und dies ist eine andere Methode, dies zu tun 

    #contact-box{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    InformationsquelleAutor The Mechanic

  3. 0

    Setzen Sie die Breite von #Kontakt-box zu width: 100%.

    Ich habe versucht, und das hat nicht funktioniert.
    Was hat es zu tun? Schwer zu helfen, zu viel, ohne weitere Informationen. Hat width: 100% nicht machen es dauern, bis die ganze Breite? Habt Ihr #Ansprechpartner-box zu einem inline-element? Ich nehme an, es ist ein div?

    InformationsquelleAutor Graham

Schreibe einen Kommentar