Javascript HTML大小调整问题

我从以下位置尝试过使用相同的方法：


我看到当我调整图片大小时，图片也会随着宽度和高度的变化而调整大小

在我的例子中，当我修改相同的代码时。我的图像被裁剪到左上角。不是整个图像：

有什么我错过的吗

JsBIN：

HTML:

图像问题：-

在网站上：

在手机上：

---

您需要为画布元素（

#main

）设置样式

背景大小：cover

，因为您使用的不是实际的图像元素，而是画布的背景图像

#main {
    width: 100%;
    background-image: url('http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');
    background-size: cover;
}

---

@ℊααnd，对于主类

背景图像：url（'http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');在你的JS箱中，我看不到任何问题。你能更准确地解释你的问题吗？@kris_IV，问题是当它在浏览器上正确地显示图像时，就像它调整到移动时一样，它应该正确地调整整个图像的大小以适应它。但是在我的例子中，它只会调整到左上角剩余图片丢失的位置。请尝试以下操作：背景大小：cover使用
background size:cover可以非常好地工作。我在网站上看不到问题。
@charset "utf-8";
/* Global Styles */
#main {
    width:100%;
    background-image:url('http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');
}   
body {
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    max-width: 960px;
    padding-left: 2.275%;
    padding-right: 2.275%;
}
/* Header */
header {
    text-align: center;
    display: block;
}
header .profileLogo .logoPlaceholder {
    background-color: white;
    color:black;
    width: 300px;
    text-align: center;
}
header .logoPlaceholder span {
    width: 180px;
    height: 22px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-size: 30px;
    font-weight: 700;
    line-height: 53px;
}
header .logoPlaceholder2 span {
    width: 180px;
    height: 22px;
    font-family: 'Montserrat', sans-serif;
    color: black;
    font-size: 30px;
    font-weight: 700;
    line-height: 53px;
}
header .profilePhoto {
    background-color: rgba(237,237,237,1.00);
    width: 259px;
    border-radius: 50%;
    height: 259px;
    clear: both;
}
header .profileHeader h1 {
    font-family: 'Montserrat', sans-serif;
    color: rgba(146,146,146,1.00);
    font-size: 30px;
    font-weight: 700;
    line-height: 24px;
}
header .profileHeader h3 {
    font-family: sans-serif;
    color: rgba(146,146,146,1.00);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
hr {
    background-color: rgba(208,207,207,1.00);
    height: 1px;
}
header .profileHeader p {
    font-family: sans-serif;
    color: rgba(146,146,146,1.00);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    overflow-y: auto;
}
header .socialNetworkNavBar {
    text-align: center;
    display: block;
    margin-top: 60px;
    clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
    border-radius: 50%;
    cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
    opacity: 0.5;
}


/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
#main {

width:100%;

}   
header {
    width: 100%;
    float: left;
}
.wrapper {
   display: inline-block;
   width: 100%;
   height: 100%;
}   
header .profileLogo .logoPlaceholder {
    display: inline-block;
    text-align: left;
}
header .profilePhoto {
    display: inline-block;
}
header .profileHeader {
    text-align: center;
    margin-top: 10%;
}
header .profileHeader p {
    text-align: justify;
}
header .socialNetworkNavBar {
    text-align: center;
    display: block;
    margin-top: 60px;

    clear: both;
    margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin-right: 23px;
}

}

/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
    width: 100%;
    float: none;
}
header .profileLogo .logoPlaceholder {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
    float: left;
    clear: both;
    margin-right: 3%;
    margin-top: 5%;
}
header .profileHeader {
    text-align: left;
    margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
    width: 74px;
    height: 74px;
    display: inline-block;
    margin-right: 23px;
}

}

/* Desktops and laptops  */
@media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
    float: left;
    margin-bottom: 50px;
}
header .profilePhoto {
    float: left;
    clear: both;
    margin-right: 3%;
}
header .profileHeader {
    text-align: left;
    padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
    width: 74px;
    height: 74px;
    display: inline-block;
    margin-right: 23px;
}



.wrapper {
   display: table;
   padding: 0;
   width: 100%;
   height: 100%;
}
.container {
   display: table-cell;
   vertical-align: middle;
}
.canvas-container {
   position: relative;
   max-width: 1024px;
   min-width: 120px;
   margin: 0 auto;
}



}

#main {
    width: 100%;
    background-image: url('http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');
    background-size: cover;
}