Question

新手在这个小项目中劈开了： http://development.puretapecult.divshot.io/

我的问题是，当浏览器尺寸崩溃或在移动浏览器上查看时，如何自动调整屏幕中心的.png？

我是否必须使用@media查询来查看mutliple查看大小，并为每个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属性background-size。

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

如果您想支持旧浏览器，请提供有关background-size和一些替代技术的更多信息：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 并将类添加到图像中。

.img-responsive

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

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

使用Window Resize调整PNG大小

2 个答案: