关键词：background-image,属性,背景图,background,变形,剪切,小轻论坛,网站,代码,no-repeat,cover
如下图，左侧是修改前的变形图片，右图为修改后的剪切图片。
左侧样式为：style="background: url({$query.thumb});background-size: 100% 100%"
右侧样式为：style="background: url({$query.thumb}) no-repeat;background-size: cover;background-position:center center"
其中，“no-repeat”是为了背景图不重复展示；“background-size: cover”是为了把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉；“background-position:center center”表示只展示背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。
此时你会发现现在的背景图看起来好看些。
学会了么？赶紧去试一下。
小轻论坛还会原创分享更多经验，欢迎收藏网址并注册会员。
湖北,武汉,汉阳区
