web-dev-qa-db-ja.com

ウィンドウ幅に基づいたdivのサイズ変更

ちょっと奇妙な質問があります。私のページには、いくつかのヘビーデューティ星雲にある惑星のメイン画像があります。最小幅が1000px、最大幅が1500pxになるように設定しています。側面がフェードアウトしているので、これは大きな画面で見栄えがします。私がやろうとしているのは、たとえばモバイルデバイスでそれを見て、1000ピクセルで幅を切り取っているとき、画像は幅1300ピクセル、中央揃え、150ピクセルがカットされていると言うことですフェードアウトがまったく見えないように各サイドから外しますが、大きなiMacのようにウィンドウの幅が大きくなり、1300ピクセルの幅を超えると再びフェードが表示されるようになります。

私の最初の考えは、どちらかの側に負のマージンを使用して何かをすることでしたが、最大幅とミックス幅を維持しながらこれを機能させることはできませんでした。

これはページのコードの特定のセクションです。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>

これについての考え、それは私が望むように動作するのに非常に近いです、ただ小さな調整が必要です。

csspositioning
41
loriensleafs

CSSのビューポート単位

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

このように、多くの異なるメディアクエリやJavaScriptを記述する必要はありません。新参者に注意してください。

JSを好む場合

window.innerWidth; window.innerHeight;

79
atilkan

絶対配置を試してください：

<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

良いトリックは、内側のボックスシャドウを使用し、画像に適用するのではなく、すべてのフェードを実行させることです。

5
Draven Vestatt

ライブデモ

ここに、あなたが説明したものの実際の実装があります。実現するための最新のベストプラクティスを使用してコードを少し書き直しました。 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>
5
totymedli