css - tamaño - div que ocupe toda la pantalla

tamaño div basado en el ancho de la ventana

Question

Tengo una especie de pregunta extraña. En mi página tengo una imagen principal de un planeta en una nebulosa de servicio pesado. Lo tengo configurado para que el ancho mínimo sea de 1000px y el máximo de 1500px. Tengo los lados difuminados y esto se ve muy bien con pantallas más grandes. Lo que me gustaría hacer es, por ejemplo, cuando lo miras en un dispositivo móvil y corta el ancho a 1000 píxeles, me gustaría que la imagen diga 1300 píxeles de ancho, centrada y se corten 150 píxeles de cada lado para que no pueda ver el fundido, pero aún así es posible agrandarlo, el ancho de la ventana se vuelve más grande, digamos un iMac grande y ese fundido vuelve a ser visible una vez que pasa ese ancho de 1300 píxeles.

Mi idea inicial fue hacer algo con márgenes negativos en ambos lados, pero no pude hacer que esto funcionara mientras mantuve el ancho máximo y el ancho de mezcla.

Esta es la sección específica del código de la página, aunque el html y el css están ahí para que todos los vean, solo puedes usar el comando fino para encontrar ese ID del div para ver más.

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

Cualquier idea sobre esto, está muy cerca de funcionar de la manera que me gustaría, solo necesita un pequeño ajuste.

Answer 1

Demo en vivo

Aquí hay una implementación real de lo que describió. Reescribí un poco tu código usando las últimas mejores prácticas para actualizar. Si 1000px el tamaño de las ventanas de su navegador a menos de 1000px , el lado izquierdo y derecho de la imagen se recortará utilizando márgenes negativos y será 300px más estrecho.

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

Pruebe el posicionamiento absoluto:

<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

Un buen truco es usar la sombra interna de la caja, y dejar que desaparezca por completo en lugar de aplicarla a la imagen.

Answer 4

Unidades de visualización para CSS

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

De esta manera, no tiene que escribir muchas consultas de medios diferentes o javascript. Solo nota para los recién llegados.

Si prefieres JS

window.innerWidth; window.innerHeight;