Wie man Punkt, wo divs stop schrumpft mit der browser-Größe
Gibt es eine Menge von dynamisch gestaltete websites gibt, wo es divs oder Bilder schrumpfen, wie die browser-Größe verringert.
Ein Beispiel HIERFÜR wäre http://en.wikipedia.org/wiki/Main_Page
Den div in dem der text ist im schrumpfen, wie die browser-Größe verringert. Dies geschieht bis zu einem bestimmten Punkt, wo es einfach entscheidet zu stoppen schrumpfen, und nur beginnen, decken Sie die Textfelder aus.
Möchte ich diese Wirkung mit einem JSFiddle arbeite ich an:
http://jsfiddle.net/MrLister/JwGuR/10/
Wenn Sie dehnen die Größe der Geige, sehen Sie die Bilder dynamisch anpassen.
Das Ziel ist es, einfach aufhören zu schrumpfen an einem bestimmten Punkt, und starten Sie einfach die Abdeckung oder Höhlenforschung in auf diese Bilder. Ich möchte dies tun, weil irgendwann wird es so klein, dass Sie text auf jedes Bild überlappt, und es sieht schlecht aus.
Hier ist die CSS für die Geige:
.figure {
position: relative;
display:inline-block;
max-width: 33%;
}
.figure .figcaption {
text-align: center;
height:0;
top: 40%;
width: 100%;
font-size: 55px;
color: white;
position: absolute;
z-index: 1;
}
.figure img {
display: block;
max-width: 100%;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie einfach ein
min-width
Größe, um die Dinge, die Sie wollen, zu stoppen schrumpfen 🙂Etwa so:
Hier ist eine aktualisierte fiddle: http://jsfiddle.net/jakelauer/JwGuR/13/
verursachen würde, die Fenster haben eine Breite von mindestens 500 Pixel.
http://jsfiddle.net/JwGuR/14/ erreichen Sie nach 500 Pixel der Bilder halt die Größe.
Hier ist ein Beispiel für media queries. Verwenden Sie css, um zu definieren, min-und max-Breite für bestimmte Fälle. In Ihrem Fall, so geben Sie eine max-Breite Gehäuse und legen Sie die css-Eigenschaften gibt.
http://css-tricks.com/css-media-queries/
Dies ist ein grundlegendes Beispiel. Als Jake sagte, Sie können auch einfach geben Sie ein min-width aber in vielen Fällen, das layout der Seite ändern sollte für Mobil-oder tablet-Ansicht, wo einfach die Definition einer min-width wird nicht ausreichen