-1

私は確かにCSSの第一人者ではありませんが、画像のコピーをユーザーにとって少しだけ負担にしたいという問題に取り組んでいます。もちろん、簡単に取得できますが、これにより、デスクトップにドラッグ/ドロップするだけでは不十分です。基本的に、私は次のようなマークアップをたくさん持っていました：

<img width="400" src="my image.png" class="foo" alt="foo">

代わりに、これを背景画像に入れて、要素をdivに変更することにしました。

<div width="400" class="foo">

私が抱えている問題は、画像の幅は固定されていますが、高さは可変であるということです。これは、imgタグを使用しているときにうまく機能しました。divタグを使用した場合、同じ動作はし​​ません。代わりに、CSSは、heightプロパティに何かを表示するように強制することを要求しています。

これは機能しません

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  /* height: 200px; */
}

このsortaはします：

.foo {
  display: block;
  margin: 0;
  padding: 0;
  width: 400px;
  background-image: url(myimage.png);
  height: 200px; 
}

問題は、前に述べたように、画像の高さがすべて可変であるということです。したがって、サイズをハードコーディングすると、何度もタイル表示されます。コンテナは5,000をはるかに超える画像のプレースホルダーになる可能性があるため、手動で設定しても機能しません。このdivをimgタグとまったく同じように動作させることができれば、問題は解決します。

4

4 に答える 4

2

人々がクリックしてドラッグ/ドロップするのを防ごうとしているだけなら、それぞれimgをで独自のものに入れdivてposition: relativeください。divその親戚の中divに、次のスタイルを持つ別のものを追加します。

div.img_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 9999; /* or anything higher than your img's z-index */
}

それは透明なで画像を覆いdivます。

そうすれば、画像（コンテンツの一部）はHTMLで構文的に正しいままです。

もちろん、サイトにアクセスするだけですでに画像を自分のコンピュータにダウンロードしていると言っているのは誰もが正しいことです。

于 2012-07-06T20:44:00.463 に答える
1

ユーザーがコンテンツを簡単に再利用できないようにする場合は、次の方法が適しています。1.低解像度の画像を使用して、再利用の可能性を制限します。2.画像に透かしを入れます。3。画像スプライトで両方を組み合わせます。

それをハッキングすることは、醜く、効果がなく、維持するのが難しいでしょう。

于 2012-07-06T20:40:32.800 に答える
0

divの背景を設定するだけで、divに画像を追加するのではありません。divのサイズは、背景画像のサイズに変更されないものに変更できます。タグを使用するだけです。

于 2012-07-06T20:33:48.523 に答える
0

CSSでできることは、すべての画像で機能する高さを追加することだけです。したがって、画像の高さが200〜250ピクセルの場合は、divを250ピクセルに設定します。それ以外の場合は、画像の高さを決定してCSSを設定するために、JavaScriptまたはサーバーサイドスクリプトが必要になります。

于 2012-07-06T20:37:45.410 に答える