我们怎样才能将小尺寸图像视为没有像素化的封面图像

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

位图是Web上最常用的图像格式。您的所有JPEG和PNG文件都是位图图像文件。位图图像由数千个像素组成。如果放大，您实际上可以将这些像素视为正方形。位图图像中的像素这些像素中的每一个都映射到图像上的固定位置，因此名称为Bitmap。大多数图像编辑软件缩小或放大这些像素以调整图像大小。这就是为什么当您将图像调整为较小尺寸时，没有明显的质量损失。主要是因为那些像素变得更不可见。另一方面，当您调整图像大小以使其变大时，这些放大的像素变得更加明显，这使得图像看起来模糊和像素化。

唯一的解决方案是使用具有更高分辨率的图像而不是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>