Html 使用“窗口大小”调整PNG的大小

这里的新手正在攻克这个小项目：

我的问题是，当浏览器尺寸缩小时，或者在移动浏览器上查看时，如何自动调整屏幕中央的.png的大小

我是否必须使用@media查询来获得多个查看大小，并为每个png创建多个类

谢谢你的帮助

修改图像的CSS类：

.spinner-outer {
    display: block;
    width: 327px;
    height: 327px;
    position: absolute;
    left: 50%;
    margin-left: -163px;
    border-radius: 50%;
    background: url(spinner-outer.png) center center no-repeat #32302e;
}

.spinner-center {
    height: 200px;
    width: 200px;
    position: absolute;
    background: url(spinner-center.png) center center no-repeat;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -99px;
    pointer-events: none;
}

.play-sprite {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -35px 0 0 -35px;
    background: url(play-sprite.png) 0px 0px no-repeat;
    height: 70px;
    width: 70px;
}

---

我会使用媒体查询来更改div的高度和宽度。请注意，您不需要为不同的大小创建多个类。只需使用以下多种媒体查询：

@media (max-width: 768px) {
    .spinner-outer {
        width: 200px;
        height: 200px;
    }
}

您还需要指定您希望背景图像适合div的大小，否则当div改变大小时，背景图像不会改变大小。只要不支持旧浏览器，就可以使用CSS3属性背景大小

.spinner-outer {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

---

如果您想支持较旧的浏览器，请提供有关背景大小和一些替代技术的详细信息：。

试试这样的方法

HTML:

<div class="image-wrapper">// Div will always re-size with page.
    <img src="[src]" />
</div>

.image-wrapper{
    max-width:90%;
    height:auto !important;
    position: relative;
    display:block;
    margin:0 auto;
}
    .image-wrapper img{
        max-width:100% !important;
        height:auto !important;
        display:block;
    }

或者您可以使用引导并像这样向映像中添加一个类

.img-responsive

使图像具有响应性（将很好地缩放到父元素）

---

这一点很好。看看Bootstrap，框架看起来非常智能。

<img src="[src]" class="img-responsive" alt="[Alt]">