html - 在 html 中，宽度和高度参数裁剪我的图片而不是缩放它。为什么？

Question

我有一个带有 css 样式文件的网页。 当我尝试在下面的代码中缩放 header2.png 时，图片会被裁剪。

知道为什么吗？

#header {
    background:url(images/bg.gif) repeat-x 0 0; 
    height: 70px;
    position: absolute;
} 
#logo a {
    background:url(images/header2.png) no-repeat 0 0; 
    width: 800px;
    height: 80px;
    position: absolute;
    top:0;
    left:10;
} 

Answer 1

您需要使用 background-size CSS 属性来缩放图片。您可以使用的一种选择是让图像按比例覆盖标题，就像这样...

#logo a { 
     background:   url(images/header2.png) no-repeat 0 0;
     width: 800px; 
     height: 80px;  
     position: absolute; 
     top:0;
     left:10;
     background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
     }

当然，您可以通过将“覆盖”更改为像素或百分比来进行试验。有关在 CSS 中调整背景大小的更多信息...请访问 http://www.w3schools.com/cssref/css3_pr_background-size.asp