基于窗口宽度调整div大小 [英] sizing div based on window width

问题描述

我有一个奇怪的问题。在我的页面上，我有一个星球的主要形象在一些重型星云。我有它的设置，所以最小宽度是1000px，最大是1500px。我有两侧淡出，这看起来伟大的大屏幕。我想尝试做的是，当你看着它在移动设备上，例如，它切断宽度在1000像素，我想图像说1300像素宽，中心和150像素被切关闭每一边，所以你不能看到所有的淡出，但仍然能够放大是窗口的宽度变大，说像一个大的iMac，褪色，然后再次可见，一旦你通过那1300像素宽度。

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.

这是从页面的代码的特定部分，虽然html和css是所有人都可以看到，你可以只使用fine命令找到的div ID任何进一步

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.

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

推荐答案

听起来您需要一个响应式网页设计：

Sounds like you need a responsive web design:

http://www.alistapart.com/articles/responsive-web-设计/

使用这些技术，您可以创建自定义CSS规则，仅针对移动大小的屏幕。

Using these techniques, you can create custom css rules that target just mobile sized screens.

这篇关于基于窗口宽度调整div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！