根据窗口宽度调整div

Question

我有一个奇怪的问题.在我的页面上,我有一个行星在一些重型星云中的主要图像.我设置它所以最小宽度是1000px,最大是1500px.我的侧面逐渐消失,大屏幕看起来很棒.我想尝试做的是当你在移动设备上查看它并且它切割1000像素的宽度时,我想图像说1300像素宽,居中并且切割150像素在每一侧,你都看不到淡出,但仍然可以放大,窗户的宽度变得更大,就像一个大的iMac一样,一旦你通过1300像素的宽度,那么褪色就会再次变得可见.

我最初的想法是在任何一方做一些带有负边距的东西,但是在保持最大和混合宽度的同时我无法使用它.

这是来自页面的特定代码段,虽然html和css就在那里供所有人查看,但您可以使用精细命令找到任何进一步查找的div ID.

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

对此有任何想法,它非常接近我喜欢的方式,只需要一个小小的调整.

Answer 1

CSS的视口单元

__CODE__

这样,您就不必编写许多不同的媒体查询或javascript.请注意新人.

如果你喜欢JS

__CODE__

Answer 2

尝试绝对定位:

<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

一个很好的技巧是使用内部阴影,让它为你做所有的褪色,而不是将它应用到图像上.

Answer 4

现场演示

这是您所描述的实际实现.我使用最新的最佳实践来重写您的代码.如果您调整浏览器窗口的大小1000px,图像的左侧和右侧将使用负边距裁剪,它将300px更窄.

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