CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS Transform＆Scaleを適用するときに画質を維持する

CSS image-renderingプロパティは、画像をスケーリングするためのアルゴリズムを設定するのに役立ちます。

構文

CSS画像レンダリングプロパティの構文は次のとおりです-

Selector {
   image-rendering: /*value*/
}

例

次の例は、CSS画像レンダリングプロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: 200px;
            width: 200px;
         }
         #one {
            image-rendering: smooth
         }
         #two {
            image-rendering: pixelated
         }
         #three {
            image-rendering: crisp-edges
         }
      </style>
   </head>
   <body>
      <img id="one" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
      <img id="two" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
      <img id="three" src="https://images.unsplash.com/photo-1610208309350-766d71494a03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
   </body>
</html>

これにより、次の出力が得られます

CSS Transform＆Scaleを適用するときに画質を維持する

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            padding: 5%;
            border-radius: 40%;
            height: 20%;
            width: 20%;
         }
         #one {
            image-rendering: pixelated
         }
         #two {
            image-rendering: smooth
         }
         #three {
            image-rendering: crisp-edges
         }
      </style>
   </head>
   <body>
      <img id="one" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <img id="two" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <img id="three" src="https://images.unsplash.com/photo-1611090093783-a629a4d9f1a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=256&ixlib=rb-1.2.1&q=80&w=256" />
      <br/>
      pixelated, smooth, crisp
   </body>
</html>

これにより、次の出力が得られます

CSS Transform＆Scaleを適用するときに画質を維持する


  1. CSSの2D変換関数

    2D変換関数は、要素に回転、移動、スケーリング、およびスキューできる2D変換を適用するために使用されます。 翻訳 −要素をx軸とy軸に沿って移動します。 スケール −要素のサイズをxy方向に変更します。 回転 −要素をある程度動かすため。 スキュー −要素をxy方向に傾斜させる。 以下は、CSSの2D変換関数を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", T

  2. Word、Excel、PowerPointで保存するときに画質を維持する

    ドキュメントを作成するときは、高品質の画像が不可欠です。他の人がはっきりと読めるようにするだけでなく、印象を残します。ただし、気付いた場合は、画像を追加するたびに品質が変化します。ぼやけて見える、画像のテキストが鮮明に見えないなど。この投稿では、Word、Excel、PowerPointに保存した後の画質の低下を修正する方法を紹介します。 Word、Excel、PowerPointで保存するときに画質を維持する ドキュメントに追加されるメディアが増えると、サイズが大きくなります。そのため、Officeアプリケーションは画像を圧縮して全体のサイズを縮小します。ただし、十分な帯域幅があり