Dimensionierung div basierend auf der Fensterbreite
Habe ich irgendwie eine seltsame Frage. Auf meiner Seite habe ich ein Haupt-Bild von einem Planeten in einigen heavy-duty-Nebel. Ich habe es so eingerichtet, dass die min-Breite von 1000px und max ist 1500px. Ich habe die Seiten verblassen, und das sieht gut aus mit größeren Bildschirmen. Was ich möchte, um zu versuchen zu tun ist, wenn man es auf einem mobilen Gerät, zum Beispiel, und es ist schneiden Sie die Breite auf 1000 Pixel, ich würde gerne das Bild sagen 1300 Pixel breit, zentriert und 150 Pixel wird abgeschnitten jeder Seite, so dass Sie nicht sehen können die fade-out -, sondern ist noch in der Lage, dann vergrößern Sie die Fensterbreite größer wird sagen auf wie ein großer iMac und verblassen dann wird wieder sichtbar, sobald Sie passieren, 1300 pixel Breite.
Mein Erster Gedanke war irgendwas mit negativen Margen auf beiden Seiten, aber ich konnte nicht diese zu arbeiten, während der max-und-mix-breiten.
Ist, dass bestimmte code-Abschnitt, der von der Seite, wenn die html-und css ist richtig, es für alle zu sehen, können Sie nur verwenden Sie den fine-Befehl, um das div-ID für die weitere Suche.
<div style="position:relative;width:100%;">
<div id="help" style="
position:relative;
z-index:1;
height:100%;
min-width: 1000px;
max-width: 1500px;
margin: 0 auto;
">
<img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;">
</div>
</div>
Irgendwelche Gedanken zu diesem, es ist sehr nah an so zu arbeiten, wie ich möchte, es muss nur ein kleines zwicken.
InformationsquelleAutor der Frage loriensleafs | 2012-04-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
Viewport-Einheiten für CSS
vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height
Diese Weise, Sie müssen nicht zu schreiben, viele verschiedene media-Abfragen oder javascript. Nur Hinweis für Neulinge.
Wenn Sie lieber JS
window.innerWidth;
window.innerHeight;
InformationsquelleAutor der Antwort atilkan
Live-Demo
Hier ist eine tatsächliche Umsetzung dessen, was Sie beschrieben. Ich schrieb deinen code ein wenig über die neuesten und besten Praktiken zu verwirklichen ist. Wenn Sie die Größe Ihrer browser-Fenster unter
1000px
das Bild der linken und rechten Seite beschnitten, mit negativen Margen, und es wird300px
schmaler.InformationsquelleAutor der Antwort totymedli
Versuchen absolute Positionierung:
InformationsquelleAutor der Antwort Eliran Malka
Ein guter trick ist die Verwendung der inneren box-shadow, und lassen Sie es alle tun, die verblassenden für Sie, anstatt die Anwendung zum Bild.
InformationsquelleAutor der Antwort Draven Vestatt