Live Demo

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的视口单元

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

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

如果您更喜欢JS

window.innerWidth; window.innerHeight;

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

Live Demo

以下是您所描述内容的实际实现。我使用最新的最佳实践来重写您的代码。如果您在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>

Answer 5

key

这将使对齐对象居中，然后还将其中的项目居中对齐以使多个宽度不同的对象居中对齐。

Example picture

Answer 6

另一个简单的技巧是设置最大宽度并将宽度设置为 100%：

.container{
max-width: 1500px; //(max of your screen/big screen)
width: 100%; // important for responsive;
overflow: scroll;

根据窗口宽度调整div

6 个答案:

Live Demo