div di dimensionamento in base alla larghezza della finestra

Question

Ho una specie di domanda strana. Nella mia pagina ho un'immagine principale di un pianeta in una nebulosa pesante. L'ho impostato in modo che la larghezza minima sia 1000px e max è 1500px. I lati si affievoliscono e questo sembra ottimo con gli schermi più grandi. Quello che mi piacerebbe provare a fare è quando lo guardi su un dispositivo mobile per esempio e sta tagliando la larghezza a 1000 pixel, mi piacerebbe che l'immagine dicesse 1300 pixel di larghezza, centrato e 150 pixel sia tagliato da ogni lato in modo che non si possa vedere la dissolvenza, ma è ancora possibile ingrandire la larghezza della finestra diventa più grande, come un grande iMac e che svanisce poi diventa nuovamente visibile una volta superata la larghezza di 1300 pixel.

Il mio primo pensiero era di fare qualcosa con margini negativi su entrambi i lati, ma non riuscivo a farlo funzionare mantenendo le larghezze massime e mixate.

Questa è la specifica sezione di codice della pagina, anche se html e css sono proprio lì per essere visti da tutti, basta usare il comando fine per trovare quell'ID div per ulteriori ricerche.

<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> 

Ogni pensiero su questo, è molto vicino a lavorare come mi piacerebbe che, ha solo bisogno di un piccolo ritocco.

Answer 1

Suona come avete bisogno di un web design reattivo:

http://www.alistapart.com/articles/responsive-web-design/

Usando queste tecniche, è possibile creare regole CSS personalizzato che colpiscono le schermate di Just Mobile dimensioni.

Answer 2

Prova posizionamento assoluto:

<div style="position:relative;width:100%;"> 
    <div id="help" style=" 
    position:absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index:1;"> 
     <img src="/portfolio/space_1_header.png" border="0" style="width:100%;"> 
    </div> 
</div> 

Answer 3

Un buon trucco è usare noi box-shadow interno e lasciare che faccia tutto lo sbiadimento per te piuttosto che applicarlo all'immagine.

Answer 4

Live Demo

Ecco un effettiva attuazione di quello che hai descritto. Ho riscritto il tuo codice un po 'usando le ultime best practice per attualizzarlo. Se ridimensionate le finestre del vostro browser sotto 1000px, i lati sinistro e destro dell'immagine verranno ritagliati usando margini negativi e sarà 300px più stretto. unità

<style> 
    .container { 
     position: relative; 
     width: 100%; 
    } 

    .bg { 
     position:relative; 
     z-index: 1; 
     height: 100%; 
     min-width: 1000px; 
     max-width: 1500px; 
     margin: 0 auto; 
    } 

    .nebula { 
     width: 100%; 
    } 

    @media screen and (max-width: 1000px) { 
     .nebula { 
     width: 100%; 
     overflow: hidden; 
     margin: 0 -150px 0 -150px; 
     } 
    } 
</style> 

<div class="container"> 
    <div class="bg"> 
     <img src="http://i.stack.imgur.com/tFshX.jpg" class="nebula"> 
    </div> 
</div> 

Answer 5

viewport per CSS

vw, vh 1vw = 1% of viewport width 1vh = 1% of viewport height

In questo modo, non c'è bisogno di scrivere molti diversi media query o javascript. Basta notare per i nuovi arrivati.

Se preferite JS

window.innerWidth; window.innerHeight;