どのように我々は、ピクセル化

Question

ずに表紙画像のような小さなサイズの画像を見ることができ

私の元の画像サイズは任意のサイズでなければなりませんように、160×80または280 * 160 1300 * 278

それ非常にぼやけたように見え、ピクセルは精巧に作られています

私のカバーの写真のスクリーンショット。

Answer 1

あなたはCSSで背景画像としてあなたの画像を挿入してみてください、あなたは相対パスを使用する場合は、あなたがよことに注意して

background-image: url(path); 
background-size: contain; 
background-repeat: no-repeat; 
background-position: center; 

プロパティを追加することができますCSSファイルが入っているフォルダからタルト。それがあった画像の種類を

.image-wrapper { 
 
    width: 1000px; 
 
    height: 150px; 
 
    border: 1px solid red; 
 
    background-image: url(https://abs.twimg.com/icons/apple-touch-icon-192x192.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
}

<div class="image-wrapper"></div>

Answer 2

ビットマップは、ウェブ上で最も一般的に使用される画像フォーマットです。すべてのJPEGファイルとPNGファイルは、ビットマップイメージファイルです。ビットマップイメージは、数千のピクセルで構成されています。ズームインすると、実際にはそれらのピクセルが四角形として表示されます。ビットマップ画像 における画素は、これらの画素の各々は、従って、画像、名前ビットマップ上の固定位置にマッピングされます。 ほとんどの画像編集ソフトウェアは、これらのピクセルを縮小または拡大して画像のサイズを変更します。このため、イメージを小さなサイズにリサイズすると、目に見える品質の低下はありません。主に、それらのピクセルがさらに目立たなくなるためです。 一方、画像を大きくするために画像のサイズを変更すると、拡大されたこれらのピクセルがより目に見えるようになり、画像がぼやけて見えるようになります。それでもリピート背景としてそれらを使用し、その後カバーのような小さな画像を使用したい場合は

唯一の解決策は、より高い解像度の画像を使用しているが、カバーのための代わりの160 * 80使用800x300またはそう:)

を意味します。 Repeat backgrounds

Answer 3

.image-wrapper { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    background-image: url(https://abs.twimg.com/icons/apple-touch-icon-192x192.png); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
}

<div class="image-wrapper"></div>