rozmiar działki oparty na szerokości okna

Question

Mam dziwne pytanie. Na mojej stronie mam główny obraz planety w jakiejś ciężkiej mgławicy. Mam to skonfigurowane, więc minimalna szerokość to 1000 pikseli, a maksymalna to 1500 pikseli. Mam boki zanikające i to wygląda świetnie na większych ekranach. Chciałbym spróbować, kiedy na przykład patrzysz na urządzenie mobilne i obcinasz szerokość 1000 pikseli, chciałbym, żeby obraz miał 1300 pikseli szerokości, wyśrodkowany i 150 pikseli jest wycięty z każdej strony, więc nie widać w ogóle zaniku, ale nadal można go powiększyć, szerokość okna staje się większa, tak jak duży iMac, a następnie zniknięcie staje się widoczne po przekroczeniu 1300 pikseli szerokości.

Początkowo myślałem o zrobieniu czegoś z ujemnymi marginesami po obu stronach, ale nie mogłem zmusić tego do pracy, zachowując maksymalną i mieszaną szerokość.

To jest ta konkretna sekcja kodu ze strony, chociaż html i css są tam, aby każdy mógł ją zobaczyć, wystarczy użyć polecenia "fine", aby znaleźć identyfikator div dla dalszego wyglądu.

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

Wszelkie przemyślenia na ten temat są bardzo bliskie pracy w taki sposób, w jaki chciałbym, wystarczy drobna korekta.

Answer 1

Brzmi jak trzeba responsive web design:

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

Korzystanie z tych technik można tworzyć własne reguły CSS, które zwalczają wielkości ekranów tylko mobilnych.

Answer 2

Spróbuj pozycjonowanie bezwzględne:

<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

Dobra sztuczka polega na użyciu wewnętrznego pudła-cienia, i niech zrobi to wszystko dla ciebie, zamiast nałożyć je na obraz.

Answer 4

Live Demo

Oto faktyczna realizacja tego, co opisane. Przepisałem trochę twój kod przy użyciu najnowszych najlepszych praktyk, aby zaktualizować. Jeśli zmienisz rozmiar okien przeglądarki pod 1000px, prawa i lewa strona obrazu zostaną obcięte przy użyciu ujemnych marginesów i będą węższe od 300px. Jednostki

<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

rzutni dla CSS

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

ten sposób, nie trzeba pisać wiele różnych zapytań mediów lub JavaScript. Po prostu uwaga dla nowo przybyłych.

Jeśli wolisz JS

window.innerWidth; window.innerHeight;