Изменение размера PNGs с окна Изменение размера

Question

Новичок здесь рубил в этом маленьком проекте: http://development.puretapecult.divshot.io/

И мой вопрос, как я могу автоматически изменить размер .pngs в центре экрана, когда размер окна браузера разрушается, или когда он просматривается в мобильном браузере?

Должен ли я использовать запросы @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

Я хотел бы использовать медиа-запросы, чтобы изменить высоту и ширину дивы. Обратите внимание, что вам не нужно создавать несколько классов для разных размеров. Просто используйте несколько запросов СМИ, как это:

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

Или вы можете использовать самозагрузки и добавить класс к изображению, как это.

.img-responsive 

Делает изображение отзывчивым (масштабируется хорошо к родительскому элементу)

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