CSS 根据窗口宽度调整 div 大小

sizing div based on window width

提问by loriensleafs

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.

我有一个奇怪的问题。在我的页面上，我有一个位于某些重型星云中的行星的主要图像。我已经设置好最小宽度为 1000 像素，最大宽度为 1500 像素。我的侧面逐渐消失，这在更大的屏幕上看起来很棒。我想尝试做的是，例如，当您在移动设备上查看它时，它会在 1000 像素处切断宽度，我希望图像说 1300 像素宽，居中，150 像素被切断在每一边，所以你根本看不到淡出，但仍然可以放大，就像大型 iMac 一样，窗口的宽度变大，一旦你超过 1300 像素宽度，淡入淡出就会再次可见。

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.

这是页面中的特定代码部分，尽管 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>

Any thoughts on this, it's very close to working the way I'd like it to, just needs a small tweak.

对此有任何想法，它非常接近于按照我想要的方式工作，只需要进行一些小调整。

回答by atilkan

Viewport units for CSS

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.

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

If you prefer JS

如果你更喜欢 JS

window.innerWidth;
window.innerHeight;

回答by Eliran Malka

Try absolute positioning:

尝试绝对定位：

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

回答by Draven Vestatt

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.

一个很好的技巧是使用内盒阴影，让它为你做所有的淡化，而不是将它应用到图像上。

回答by totymedli

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 300pxnarrower.

这是您所描述的实际实现。我使用最新的最佳实践重写了您的代码以实现它。如果您在 下调整浏览器窗口的大小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>

回答by ?gir Máni Hauksson

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

示例图片