69

ちょっと変な質問があります。私のページには、重い星雲にある惑星のメイン画像があります。最小幅が1000px、最大幅が1500pxになるように設定しました。側面がフェードアウトしており、これは大きな画面で見栄えがします。私がやりたいのは、たとえばモバイルデバイスで見ているときに、幅が 1000 ピクセルで切り取られている場合です。画像の幅が 1300 ピクセル、中央に配置され、150 ピクセルが切り取られているとします。フェードアウトはまったく見えませんが、大きなiMacのようにウィンドウの幅が大きくなり、その1300ピクセル幅を超えるとフェードが再び見えるようになるため、拡大することができます。

私の最初の考えは、両側に負のマージンを使用して何かを行うことでしたが、最大幅と混合幅を維持しながらこれを機能させることができませんでした。

これは、ページのコードの特定のセクションです。html と css はすぐそこにあり、誰でも見ることができます。詳細なコマンドを使用して、その 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>

これについての考えは、私が望むように動作することに非常に近いです。ほんの少しの微調整が必​​要です。

4

6 に答える 6

10

ライブデモ

これが、あなたが説明したものの実際の実装です。実現するために、最新のベスト プラクティスを使用してコードを少し書き直しました。でブラウザ ウィンドウのサイズを変更する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>
于 2013-09-03T22:53:59.947 に答える
7

絶対配置を試す:

<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>
于 2012-04-09T15:33:20.763 に答える
5

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

于 2012-04-09T17:18:43.440 に答える