sizing div based on window width

Question

I have kind of a weird question  On my page I have a main image of a planet in some heavy duty nebula   I have it set up so the min width is 1000px and max is 1500px  I have the sides fading out and this looks great with larger screens  What I d like to try to do is when you re looking at it on a mobile device for example and it s cutting off the width at 1000 pixels  I d like the image say 1300 pixels wide  centered and 150 pixels is cut off each side so you can t see the fade out at all  but is still able to then enlarge is the window s width becomes larger say on like a large iMac and that fade then becomes visible again once you pass that 1300 pixel width    My initial thought was to do something with negative margins on either side  but I couldn t get this to work while keeping the max and mix widths   This is that specific section of code from the page  though the html and css is right there for everyone to see  you can just use the fine command to find that div ID for any further looking    lt div style  position relative width 100    gt      lt div id  help  style         position relative        z-index 1        height 100         min-width  1000px        max-width  1500px        margin  0 auto       gt         lt img src  http   i stack imgur com tFshX jpg  border  0  style  width 100    gt      lt  div gt   lt  div gt    Any thoughts on this  it s very close to working the way I d like it to  just needs a small tweak

User · Answer

Try absolute positioning    lt div style  position relative width 100    gt       lt div id  help  style       position absolute      top  0      right  0      bottom  0      left  0      z-index 1   gt           lt img src   portfolio space 1 header png  border  0  style  width 100    gt       lt  div gt   lt  div gt

User · Answer

Live Demo Here is an actual implementation of what you described  I rewrote your code a bit using the latest best practices to actualize is  If you resize your browser windows under 1000px  the image s left and right side will be cropped using negative margins and it will be 300px narrower   lt style gt      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                lt  style gt    lt div class  quot container quot  gt      lt div class  quot bg quot  gt         lt img src  quot http   i stack imgur com tFshX jpg quot  class  quot nebula quot  gt      lt  div gt   lt  div gt

User · Answer

html  body       height  100       width  100      html       display  table      margin  auto     body       padding-top  50px      display  table-cell     div       margin  auto      This will center align objects and then also center align the items within them to center align multiple objects with different widths   Example picture

User · Answer

Viewport units for CSS  1vw   1  of viewport width 1vh   1  of viewport height   This way  you don t have to write many different media queries or javascript   If you prefer JS  window innerWidth  window innerHeight

User · Answer

A good trick is to use inner box-shadow  and let it do all the fading for you rather than applying it to the image

[css] sizing div based on window width

Examples related to css

Examples related to positioning