css - 根据窗口宽度调整和定位元素

Question

我有个奇怪的问题。在我的页面上，我有一个在一些重型星云中的行星的主图像。我已将其设置为最小宽度为 1000 像素，最大宽度为 1500 像素。我让两侧逐渐淡出，这在大屏幕上看起来很棒。我想尝试做的是，当您在移动设备上查看它时，它会将宽度截断为 1000 像素，我希望图像显示为 1300 像素宽、居中并截断 150 像素关闭每一侧，所以您根本看不到淡出，但仍然可以放大，因为窗口的宽度变大，就像大型 iMac 一样，一旦您超过 1300 像素宽度，淡入淡出就会再次可见。

我最初的想法是在两边做一些负边距的事情，但我无法在保持最大宽度和混合宽度的同时让它工作。

这是页面中的特定代码部分，虽然 html 和 css 就在那里供所有人查看，但您可以使用 fine 命令找到该 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 的视口(viewport)单位

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

这样，您就不必编写许多不同的媒体查询或 javascript。

如果你更喜欢 JS

window.innerWidth;
window.innerHeight;