0

ウェブサイトに大きな画像を表示しようとしています。設計仕様は、画像の一部を表示し、残りはビューポートの外に隠すことです。ビューポート/ブラウザを広くドラッグすると、より多くの画像が表示されます。

テストサイトはこちらhttp://kazoup.airboxmedia.com/

Mac の画像を配置したまま (テキストの約 50px 右) にしたいのですが、ブラウザーを広げて画像をより多く表示すると、画像はテキストから同じ距離に留まります。

現時点では、100% の DIV の背景画像です。IMG HTML として追加しようとしましたが、強制的に画面から外すとすぐに水平スクロール バーが表示され、これは必要ありません。バックグラウンドで % % も使用してみましたが、これは同じ場所に保持されていないようです。

だから私はそれをテキストから修正し、スクロールバーをなくし、ブラウザを広げるにつれてより多くの画像を表示できるようにしたいと考えています.

何か案は？私は午後ずっと立ち往生しています。

よろしくお願いします。

ジャック

4

1 に答える 1

1

imgの代わりに を使用しbackground-imageます。imgの中に配置し、#wrapper以下のようにCSSを適用します。

HTML:

<div id="wrapper">
    <img class="hero-img" src="static/img/macbook.png">
    <!-- etc. -->

CSS:

#outerWrap2 {
    min-width: 940px; /* 940px is used because it is the width of #wrapper */
    overflow: hidden; 
}

.hero-img{
    position: absolute;
    left: 42%;
    top: 135px;
}

img明らかに、好きなクラス/IDなどでcssを適用し、図を変更して、画像が必要な場所に正確に並ぶようにすることができます。

于 2013-06-28T16:26:43.017 に答える