BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSS image resize percentage of itself?

2022-07-01 21:13:23

質問

画像にパーセンテージを付けてリサイズしようとしています。例えば、私はちょうどそれが50％にリサイズすることによって半分に画像を縮小したい。しかし、適用する width: 50%; を適用すると、画像はコンテナ要素 (親要素で、たぶん <body> のような親要素) の50%にリサイズされる。

質問ですが、javascriptやサーバーサイドを使用せずに、画像自体のパーセンテージでサイズを変更することは可能ですか？(私は画像のサイズの直接の情報を持っていない）。

私はあなたがこれを行うことはできません確信していますが、私はちょうどインテリジェントなCSSのみのソリューションがあるかどうかを確認したいです。ありがとうございます。

どのように解決するのですか？

2つの方法があります。

方法1． jsFiddleでデモを行う

このメソッドは、DOM上の実寸ではなく、視覚的にのみ画像をリサイズし、リサイズ後の視覚的な状態は元のサイズの中央で表示されます。

htmlを使用します。 

<img class="fake" src="example.png" />

cssを使用します。 

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}​

ブラウザのサポート情報。 ブラウザの統計では、インラインで表示される css .

方法2. jsFiddleでのデモ

htmlを使用します。 

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>​

cssを使用します。 

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}​

注意 img.normal と img.fake は同じ画像です。

ブラウザのサポートに関する注意事項。 このメソッドはすべてのブラウザで動作します。なぜなら、すべてのブラウザは css プロパティをサポートしているからです。

メソッドはこのように動作します。

  1. #wrap そして #wrap img.fake が流れる
  2. #wrap がある overflow: hidden となっており、内側の画像と同じ大きさになっています( img.fake )
  3. img.fake の中にある唯一の要素です。 #wrap がなく absolute を配置することで、2番目のステップを壊さないようにします。
  4. #img_wrap は absolute の中に位置する #wrap に配置され、サイズも要素全体に広がっています ( #wrap )
  5. 第4ステップの結果は #img_wrap が画像と同じ寸法になることです。
  6. 設定により width: 50% に img.normal の場合、その大きさは 50% の #img_wrap であり、したがって 50% は元の画像サイズの

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します