0

第一に、私はこれに慣れていないので、我慢してください。

私は自分のサイトにかなりクールな「フェードオンスクロールスクリプト」を実装しました。

しかし、私が探しているのは、fastcocreateのサイトのように上部スパンの画像を100％幅にすることです。

これは私が取り組んでいるdivです：

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100% 560px;"> 
</div>

ここで、「background-size：100％auto;」を追加してみました。これが私のテキストに奇妙なことをすることを除いて、トリックを行うdivに。たとえば、ブラウザをスリムにすると、テキストは一緒に移動しません。そのため、そのアイデアを破棄しました。

次に、「background-size：100％560px;」に変更しました。これでこの問題は解決しました。しかし、もう1つ作成されたのは、ブラウザを小さくすると画像が押しつぶされたり、大きくすると画像が引き伸ばされたりすることです。

上記のものに近いと感じますが、画像のストレッチの問題の解決策を探しています。現在のサイズよりも大きい画像をアップロードする必要がありますか？

私が以前に言ったように、これらの人は良い仕事をします。

4

1 に答える 1

0

fastocreate には画像に最小幅が設定されているように見えます。

min-width: 100%;
height: auto;

?

それがfastocreateの機能だと確信しています

最高、-b

※また、ブラウザの「検査要素」を有効にしてみてください。誰かのスタイルを反映しようとするときに非常に役立ちます。

編集：

あなたのコメントに応えて、サイズを変更するjQuery関数を作成してみてください。

例えば

function resize(){
  var height = $('img').width / 2; //sets variable height to the width divided by 2
  $('img').height(height); // sets the value of the height to the variable height
};

またはそのようなもの。

于 2012-08-06T15:33:14.840 に答える