web-dev-qa-db-fra.com

dimensionnement div basé sur la largeur de la fenêtre

J'ai une sorte de question étrange. Sur ma page, j'ai l'image principale d'une planète dans une nébuleuse très résistante. Je l'ai mis en place de sorte que la largeur minimale est 1000px et max est de 1500px. J'ai les côtés qui s'estompent et cela a l'air génial avec des écrans plus grands. Ce que j'aimerais essayer, c’est que lorsque vous regardez l’appareil mobile, par exemple, et que la largeur soit réduite à 1 000 pixels, je voudrais que l’image dise 1 300 pixels de large, centrée et 150 pixels coupés. de chaque côté afin que vous ne puissiez pas voir le fondu du tout, mais que vous pouvez toujours l'agrandir si la largeur de la fenêtre devient plus grande, disons comme un grand iMac, et ce fondu redevient visible une fois que vous avez dépassé cette largeur de 1 300 pixels.

Ma pensée initiale était de faire quelque chose avec des marges négatives de chaque côté, mais je ne pouvais pas le faire fonctionner tout en gardant la largeur maximale et la largeur de mixage.

C’est cette section spécifique du code de la page, bien que le code html et le fichier css soient à la portée de tous, vous pouvez simplement utiliser la commande fine pour rechercher cet identifiant div pour une recherche ultérieure.

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

Toutes les idées à ce sujet, c'est sur le point de fonctionner comme je le souhaiterais, nécessite juste un petit tweak.

csspositioning
41
loriensleafs

nités de Viewport pour CSS

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

De cette façon, vous n'avez pas à écrire de nombreuses requêtes multimédia ou javascript. Notez juste pour les nouveaux arrivants.

Si vous préférez JS

window.innerWidth; window.innerHeight;

79
atilkan

Essayez le positionnement absolu:

<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>
6
Eliran Malka

Une bonne astuce consiste à utiliser une zone d'ombre intérieure et à laisser le fondu à votre place plutôt que de l'appliquer à l'image.

5
Draven Vestatt

Démo en direct

Voici une implémentation réelle de ce que vous avez décrit. J'ai un peu réécrit votre code en utilisant les meilleures pratiques les plus récentes pour l'actualisation. Si vous redimensionnez les fenêtres de votre navigateur sous 1000px, Les côtés gauche et droit de l'image seront rognés à l'aide de marges négatives et la largeur 300px Sera réduite.

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