Размер div на основе ширины окна

У меня есть странный вопрос. На моей странице у меня есть основное изображение планеты в какой-то тяжелой туманности. Я настроил его так, чтобы ширина min составляла 1000px, а max - 1500px. У меня стороны исчезают, и это выглядит великолепно с большими экранами. То, что я хотел бы попытаться сделать, - это когда вы смотрите на него на мобильном устройстве, например, и сокращаете ширину в 1000 пикселей, я бы хотел, чтобы изображение произносило 1300 пикселей в ширину, с центром и 150 пикселей с каждой стороны, чтобы вы вообще не могли видеть постепенное исчезновение, но по-прежнему можно увеличить размер окна, так как ширина окна становится больше, скажем, как большой iMac, и затем исчезает, когда вы проходите эту ширину 1300 пикселей.

Моя первоначальная мысль заключалась в том, чтобы делать что-то с отрицательными полями с обеих сторон, но я не мог заставить это работать, сохраняя максимальную и микс ширины.

Это конкретный раздел кода на странице, хотя html и css доступны для всех, и вы можете просто использовать команду fine, чтобы найти этот идентификатор div для дальнейшего поиска.

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

Любые мысли об этом, он очень близок к тому, чтобы работать так, как мне хотелось бы, просто нуждается в небольшой настройке.

Ответ 1

Похоже, вам нужен отзывчивый веб-дизайн:

http://www.alistapart.com/articles/responsive-web-design/

Используя эти методы, вы можете создавать пользовательские правила CSS, предназначенные только для мобильных экранов.

Ответ 2

Единицы просмотра для CSS

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

Таким образом, вам не нужно писать много разных медиа-запросов или JavaScript.

Если вы предпочитаете JS

window.innerWidth;
window.innerHeight;

Ответ 3

Попробуйте абсолютное позиционирование:

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

Ответ 4

Хорошая уловка - использовать внутреннюю рамку-тень и позволить ей делать все замирание вместо того, чтобы применять ее к изображению.

Ответ 5

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>