Как предотвратить перекрытие изображений при увеличении окна?

Когда я делаю окно большим, изображения масштабируются вместе с ним и в конечном итоге перекрывают друг друга.Как предотвратить перекрытие изображений при увеличении окна?

То, что я хочу, чтобы это было:

http://i.imgur.com/f0TuWCp.png

Что происходит, когда я масштабировать окно:

http://i.imgur.com/6HWY2LD.png

Html:

<html> 

<head> 

</head> 
<body> 
    <link rel="stylesheet" type="text/css" href="styleE.css"> 
    <script type="text/javascript" src="JQuery.js"></script> 
    <script type="text/javascript" src="JQueryAnimation.js"></script> 
    <script type="text/javascript" src="draw.js"></script> 
    <img src="Sprites/Button.png" width="25%" id="triggerButton" style="top:50px;"> 
    <img src="Sprites/Primary.png" width="17%" id="primaryButton" style="top:150px;"> 


    </br> 
     <img src="Sprites/1.png" width="15%" id="wedge1" style="top:600px;" class="spinner"> 
     <img src="Sprites/2.png" width="15%" id="wedge2" style="top:600px;" class="spinner"> 
     <img src="Sprites/3.png" width="15%" id="wedge3" style="top:600px;" class="spinner"> 
     <img src="Sprites/4.png" width="15%" id="wedge4" style="top:600px;" class="spinner"> 
     <img src="Sprites/5.png" width="15%" id="wedge5" style="top:600px;" class="spinner"> 
     <img src="Sprites/6.png" width="15%" id="wedge6" style="top:600px;" class="spinner"> 
     <img src="Sprites/7.png" width="15%" id="wedge7" style="top:600px;" class="spinner"> 
     <img src="Sprites/8.png" width="15%" id="wedge8" style="top:600px;" class="spinner"> 
     <img src="Sprites/9.png" width="15%" id="wedge9" style="top:600px;" class="spinner"> 
     <img src="Sprites/10.png" width="15%" id="wedge10" style="top:600px;" class="spinner"> 
     <img src="Sprites/11.png" width="15%" id="wedge11" style="top:600px;" class="spinner"> 
     <img src="Sprites/12.png" width="15%" id="wedge12" style="top:600px;" class="spinner"> 
</body>

Css:

#triggerButton { 
    position: absolute; 
    right: 0; 
    left: 0; 
    margin: auto; 

} 

#primaryButton { 
    position: absolute; 
    right: 0; 
    left: 0; 
    margin: auto; 

} 

.spinner{ 

    transform-origin:top left; 
    position: absolute; 
    right: 0; 
    left: 12%; 
    width: auto; 
    max-width:11%; 
    margin: auto; 
}

Спасибо!

источник

2014-10-29 Anthoney Kalasho

Вы можете создать jsfiddle или указать URL-адрес –

Позиция: абсолютное вытягивает элементы из правил рендеринга DOM. CSS как написано говорит браузеру всегда размещать эти элементы в позиции X независимо от размера элемента или экрана. A List Apart имеет отличную статью для хорошего обоснования того, как позиционирующие работы: http://alistapart.com/article/css-positioning-101

Удалите позиционирование и вместо этого используйте свойства «display:» или «float:». Вещи начнут поступать в соответствии с правилами рендеринга DOM.

Кроме того, убедитесь, что применяемые классы CSS имеют функциональное или семантическое именование. Избегайте использования классов, которые ссылаются на обработку дизайна, поскольку такие вещи, как цвет/большой/маленький, могут и со временем меняться, т. Е. «Whitebackground». Код гораздо лучше работает с использованием чего-то типа «имя-клиента» или .theme, а затем объявляет цвет фона для этого класса или тега BODY.

https://stackoverflow.com/a/19385846/4064180

источник

2014-10-29 18:03:21

Спасибо, вы помогли тонну! Изменение «position: absolute»; на "display: block;" решена проблема масштабирования, но она создала другую. Я использовал «position: absolute» в классе «.spinner», чтобы складывать изображения друг на друга. Если я потеряю «положение: абсолютное», изображение перестает масштабироваться, как хотелось бы, но они перестают складываться. Еще раз спасибо! –

@AnthoneyKalasho оберните прядильщик в 'div', дайте' div' 'display: block', а затем элементы внутри spinner' position: absolute' – starvator

@starvator Я сделал это, но ничего не изменил –

Вместо того, чтобы использовать проценты по ширине ваших кнопок и блесны, дайте ему фиксированную ширину, такие как 300px.

Кроме того, вы должны рассмотреть возможность удаления позиции: абсолютной, поскольку она не служит вам никакой цели. Вместо этого полностью удалите его и добавьте display: block;

источник

2014-10-29 18:05:14 chdltest

Как предотвратить перекрытие изображений при увеличении окна?

ответ

Смежные вопросы