使用 Window 调整大小调整 PNG

Question

这里的新手正在研究这个小项目： http://development.puretapecult.divshot.io/

我的问题是，当浏览器尺寸缩小或在移动浏览器上查看时，如何自动调整屏幕中央的 .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;
}

Answer 1

我会使用媒体查询来更改 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;
}

有关背景大小的更多信息和一些替代技术（如果您想支持旧版浏览器）：https://css-tricks.com/perfect-full-page-background-image/。

Answer 2

尝试这样的事情。

HTML:

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

CSS:

.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;
    }

或者您可以使用 bootstrap 并像这样在图像中添加 class。

.img-responsive

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

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

使用 Window 调整大小调整 PNG

Resize PNGs with Window Resize

html

css

browser

png