用CSS背景属性代替图片SRC

不久前，我分享了一个使用WordPress上传图片生成缩略图的方法，将其作为文章列表中的预览图。这引发了两个值得思考的问题：如果上传的图片高度或宽度不足150px，缩略图会被拉伸，影响美观。那么，如何确保图片都能以150x150的尺寸显示，并且居中呢？我们可以用CSS来实现这一效果。

在跟帖中，有很多网友给出了精彩的解决方案，但我想分享一个自己常用的简单方法。虽然这个方法在五年前就已经有人在使用了，但它依然方便快捷。

这个方法的原理很简单，只需跟随我的步骤即可。创建一个透明的图片，可以选择使用GIF格式的图片，因为文件头较小。这个透明图片的尺寸只需设置为1px1px即可。然后，给IMG元素设定宽和高，150" 150"。接下来，通过style属性的background将你希望显示的图片作为背景设置在IMG元素上。设置background-position为50% 50%，实现图片的水平和垂直居中。这样，我们就得到了一个不会拉伸的、居中显示的缩略图。

举个例子，在狼蚁网站SEO优化的页面中，可以如此操作：复制一段代码，将透明图片的URL作为img标签的src属性，并将需要显示的图片的URL设置为background属性。同时设置图片的宽度和高度以及background-position属性。

还有一个比较常用的方法是在DOM加载完毕时通过JavaScript将图片载入，并根据图片和外框的大小计算，为图片添加margin使其居中。这种方法可以让document优先加载，保证页面的显示速度。当页面上的图片数量较多时，IE浏览器可能会出现卡顿的情况。

回到五年前，那时我刚买计算机，上网下载图片时总是下载到透明的GIF图片，让我困惑不解。于是我开始研究，发现当时的网站上的图片大多都是通过背景的方式显示出来的。虽然网站无法完全防止用户下载页面上的图片，但这个简单的方法至少可以实现两点。它可以保证用户在另存网页时不会下载到页面上的图片。对于粗心的用户来说，他们下载了大量图片后才会发现原来下载的都是透明图片。

如今，通过技术的不断进步，我们可以更加灵活地处理图片显示问题，让网页更加美观、用户友好。无论是通过CSS还是JavaScript，我们都有许多方法可以选择，以实现更好的用户体验。