1

img src="image.jpg" width="75%" height="75%" のように、高さと幅をパーセンテージに設定して画像を表示する必要があります。これは、すべての PC のブラウザーで正常に機能します。ipad や他のタブレット ブラウザで同じ Web ページを開くと、画像がぎこちなく見えます。幅は非常に小さくなり、画像の高さはタブレットの高さ全体にスケーリングされます。

サンプル URL はこちら: http://www.stringroot.com/postid/01a32j1a7

css または画像の高さと幅の設定に何か問題がありますか?

パーセンテージをピクセルに変換する数式を使用する必要がありますか?

私は css と frontend の初心者です。どんなポインタでも私を大いに助けます。

画像全体の 50% だけを表示したいのですが、クリックすると画像全体が表示されます。

4

2 に答える 2

0

画像を要素の背景として設定する必要があります。設定する幅 (属性としてではなく css で設定する必要があります) は、画像のサイズを変更し、一部を非表示にしません。

//Markup
<div style="background: url(/site_media/rao_soft2771/ileana7a_.jpg) 0 0 no-repeat;">
</div>

.fancybox {
    height: 75%;
    width: 75%;
    overflow: hidden;
}

次に、.fancyboxから画像を削除します

それはあなたが始めるのに十分なはずです:)

于 2013-09-04T12:07:47.243 に答える
0

問題を解決するにはいくつかの方法があります。TL;DR; を付けます。ここに答えてください、そして私の2セントは下にあります。

方法 1:

HTML

<div class="wrapper">
   <div class="img_wrapper">
      <a href=""><img src="image.jpg" class="visible_img"/></a>
   </div>
   <img src="image.jpg" class="invisible_img"/>
</div>

(どちらの画像も同じ img src を使用しています)

CSS

.wrapper{
    position: relative;
    float: left;
    overflow: hidden;
}

.img_wrapper{
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

img.invisible_img{
    visibility: hidden;
}

img.visible_img{
    width: 50%;
    height: 50%;
}

方法 2 CSS の scale() を使用: 元の img にクラスを与えるだけです。

HTML

<img src="image.jpg" class="resized_img"/>

CSS

.resized_img{
    -webkit-transform: scale(0.75);
       -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
         -o-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
}

私が提供するどちらの方法でも、コンテナー (li) は画像の幅と高さ全体を占めます。

あなたの問題に関するいくつかの考え：

幅と高さのパーセンテージは、イメージのコンテナーの幅と高さを使用して計算されます。リンクの例では、画像のコンテナー (li) の幅は 600px で、高さの値は指定されていません。PC ブラウザーでは、width="75%" height="75%"は、幅 = 600px の 75% (つまり 450px)、高さ = 未定義の値の 75% (ブラウザーが高さとして認識した値: auto; ）。画像は 1440x900 であるため、450px は画像の元の幅の 75% ではないことに注意してください。

特定のモバイル ブラウザー (iPad) では、PC ブラウザーほど柔軟ではなく、高さ = 75% を、コンテナーが到達できる最大の高さの 75% (非常に高い高さ) として認識しました。それがあなたのイメージが歪んでいる理由です。

通常、元のサイズの一部としてではなく、画面サイズ (したがってコンテナーのサイズ) に従って画像を表示することをお勧めします。各ユーザーの画面は異なるため、ユーザーによっては画像が小さすぎたり大きすぎたりする場合があります。

もう 1 つの問題は、画像のサイズです。画像はクライアント側でサイズ変更されます。つまり、サーバーはまだ完全な画像をユーザーに送信しています。ユーザーが画像をクリックしてフルサイズで表示しない場合、サムネイルを提供するために必要な帯域幅の約 2 倍を浪費していることになります。20 個の画像の画像ギャラリーを作成し、ユーザーが 1 つしか表示しない場合、無駄な帯域幅は 19 倍になります。通常、画像のサムネイルと完全な画像は、必要な場合にのみサーバーによって提供される、サイズの異なる 2 つの異なるファイルである必要があります。（そして、このアプローチを使用すると、クリーンで効果的な方法でも問題を解決できるようになります）。

于 2013-09-05T19:02:34.330 に答える