2017-03-05 9 views
0

内にとどまる[これが私の最初の投稿です - 優しくしてください;-)]ブートストラップ:リサイズなしのクリップ画像やコンテナ

私は、ページヘッダの一部として使用しようとしているイメージを持っています。画像は(意図的に)非常に広いので、任意のデバイス幅で使用できます。

イメージの一部は、必要に応じて(右から)切り取ることができる(模様付きの)長い行(文字列またはロープのように見えます)です。

デバイスの幅が変更されると、イメージはではなく、に変更されますが、イメージの可視幅はブートストラップがボディに設定する幅に従います。

もう1つの方法:コンテナのサイズを変更してデバイスの幅が変更されても反応しますが、イメージのサイズを変更したくない場合は、イメージの右端を切り抜きたい代わりに親コンテナの境界に移動します。

私はHTMLでこのようなものがあります:私は次のように使用してみましたん

.my-image-container { 
    /* What to put here? */ 
} 

.my-image { 
    /* What to put here? */ 
} 

.my-image { 
    max-width: none; 
    overflow: hidden; 
} 

しかし、それはもはやリサイズしながら、

<body class="container> 
    <header class="row-fluid"> 
    <div class="my-image-container"> 
     <img class="my-image" src="images/my_image.png" alt="" /> 
    </div> 
    </header> 
    ... 
</body> 

とCSSをイメージのサイズを変更すると、イメージの終わりがブラウザの端に移動します。 body/header/divの親の幅の範囲。

コンテナと画像にそれぞれ相対的な絶対的な位置を使用するように思われる他の質問/回答がありましたが、その他の設定もありましたが、それにはあまり運がありませんでした。

イメージを分割することもできましたが、繰り返すことができましたが、結果として得られる出力は美的には満足できませんでした。

私はこの特定の問題に対処するための事前の質問を見つけることができませんでした。私はあなたが私を助けることを望んでいます。

あなたの入力を気に入ってください!背景画像は、物事について移動する簡単な方法だろう使用し、ヘッダーのかなり標準的である、上部のテキストなどを追加するために、後であなたにオプションを提供します:)

は、スタックオーバーフローへようこそ、誰をも

答えて

0

他に(幸運を!)優しくして

.my-image-container { 
 
    height: 250px; 
 
    background: url("http://placehold.it/800x250") top left no-repeat; 
 
}
<header class="row-fluid"> 
 
    <div class="my-image-container"></div> 
 
</header>

+0

は、最初の試行での魅力のように働きました。迅速な返信(そして暖かい歓迎)に感謝します。 – booraroom

+0

これは素晴らしい、上向き、上向きです – mayersdesign

関連する問題