css 设置图片原来大小,用CSS设置背景图像的大小？

摇曳的蔷薇

CSS 2如果需要使图像更大，则必须在图像编辑器中编辑图像本身。如果您使用IMG标记，您可以更改大小，但如果您需要图像作为其他内容的背景(并且它不会像您似乎想要的那样重复自己)，这将不会给您提供想要的结果.CSS 3释放力量这在CSS 3中是有可能的background-size.所有现代浏览器都支持这一点，所以除非您需要支持旧浏览器，否则这就是实现它的方法。受支持的浏览器：Mozilla Firefox 4.0+(Gecko 2.0+)、Microsoft InternetExplorer 9.0+、Opera 10.0+、Safari 4.1+(Webkit 532)和Chrome 3.0+。.stretch{/* Will stretch to specified width/height */

  background-size: 200px 150px;}.stretch-content{/* Will stretch to width/height of element */

  background-size: 100% 100%;}.resize-width{/* width: 150px, height: auto to retain aspect ratio */

  background-size: 150px Auto;}.resize-height{/* height: 150px, width: auto to retain aspect ratio */

  background-size: Auto 150px;}.resize-fill-and-clip{ 

  /* Resize to fill and retain aspect ratio.

     Will cause clipping if aspect ratio of box is different from image. */ 

  background-size: cover;}.resize-best-fit{/* Resize to best fit and retain aspect ratio.

   Will cause gap if aspect ratio of box is different from image. */ 

  background-size: contain;}特别是，我喜欢cover和contain给我们新的控制力的价值观，这是我们以前没有过的。圆您也可以使用background-size: round与重复相结合有意义的：.resize-best-fit-in-repeat{/* Resize to best fit in a whole number of times in x-direction */ 

  background-size: round auto; /* Height: auto is to keep aspect ratio */

  background-repeat: repeat;}这将调整图像的宽度，使其适合在背景定位区域的全部次数。附加说明如果您需要的大小是静态像素大小，那么物理地调整实际图像的大小仍然是明智的。这不仅是为了提高调整大小的质量(考虑到您的图像软件比浏览器做得更好)，而且如果原始图像大于显示内容，则可以节省带宽。