창이 커질 때 이미지가 겹치지 않게하려면 어떻게합니까?

창을 크게 만들면 이미지 크기가 커지고 결국 서로 겹칩니다.창이 커질 때 이미지가 겹치지 않게하려면 어떻게합니까?

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 위치에 배치합니다. List Apart은 긍정적 인 작동 방식에 대해 좋은 근거를 얻는 훌륭한 기사입니다. http://alistapart.com/article/css-positioning-101

위치를 제거하고 대신 "display :"또는 "float :"속성을 사용하십시오. DOM 렌더링 규칙에 따라 일이 흐르기 시작합니다.

또한 CSS 클래스에 기능적 또는 의미 론적 이름이 지정되어 있는지 확인하십시오. 색상/큰/작은 캔은 시간이 지남에 따라 변경 될 수 있기 때문에 디자인 처리를 참조하는 클래스 사용을 피하십시오 (예 : "whitebackground"). 이 코드는 "client-name"이나 .theme과 같은 것을 사용하고 그 클래스 나 BODY 태그의 배경색을 선언하는 것이 훨씬 더 효과적입니다. 대신 당신의 버튼과 스피너의 폭에 대한 비율을 사용

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

출처

2014-10-29 18:03:21

감사합니다, 당신은 톤을 도왔습니다! "위치 : 절대;"변경 "표시 : 블록;" 스케일링 문제를 해결했지만 또 다른 문제를 만들었습니다. 나는 "위치 : 절대"를 ".spinner"클래스에서 사용하여 서로의 위에 이미지를 쌓습니다. "위치 : 절대"를 잃으면 이미지는 원하는대로 크기 조정을 멈추지 만 스태킹을 멈 춥니 다. 다시 한 번 감사드립니다! –

@AnthoneyKalasho는 'div'에 스피너를 래핑하고 'div : display : block'다음에 스피너 'position : absolute'의 요소를 입력합니다. – starvator

@starvator @ didvator하지만 아무 것도 변경하지 않았습니다. –

등 300 픽셀로에게 고정 폭을 제공합니다.

또한 위치를 제거하는 것이 좋습니다. 대신 완전히 제거하고 display : block을 추가하십시오.

출처

2014-10-29 18:05:14 chdltest

창이 커질 때 이미지가 겹치지 않게하려면 어떻게합니까?

답변

관련 문제