요소를 창에서 같은 위치에 배치합니다. 크기 조정

내 웹 페이지는 두 가지로 구성됩니다. 모든 창 크기를 조정할 이미지 크기를 조정 한 다음 4 개의 텍스트 상자가있는 이미지를 이미지의 특정 위치에 배치합니다.요소를 창에서 같은 위치에 배치합니다. 크기 조정

제 문제는 텍스트 상자가 윈도우 크기 조정에서 벗어나 이동하는 것입니다. 나는 6 시간 이상을 CSS와 jquery에서 모든 것을 시도하면서 내 머리카락을 뽑아 냈지만, 나는 아무것도 얻을 수 없다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
    body 
    { 
     margin: auto; 
     width: 100%; 
    } 

    .Wrapper 
    { 
     position:relative; 
     min-width: 500px; 
     width: 100%; 
     margin:auto; 
    } 

    .Image 
    { 
     max-width: 1150px; 
     max-height: 1453px; 
     width: 100%; 
    } 

    .Form 
    { 
     position: relative; 
     top:-260px; 
     left: 200px; 
     width: 130px; 
     border: solid 1px #000; 
    } 
</style> 
</head> 
    <body> 
     <div class="Wrapper"> 
     <div> 
      <img src="image.png" class="Image" /> 
     </div> 
     <div class="Form"> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
      <br /> 
      <input type="text" /> 
     </div> 
    </div> 
</body> 
</html>

전체 창 : enter image description here

크기 조정 창 : enter image description here 때문에 래퍼의 CSS의 아마

출처

2013-04-11 the sandman

jsfiddle를 만들 수 있습니까? 귀하의 마크 업 + CSS는 스크린 샷에서 레이아웃을 다시 생성하지 않습니다 – Ejaz

그 블랙 박스는 어디서 오는가? 그것은 이미지의 일부입니까? – Blazemonger

@Blazemonger - 예, 이미지입니다. –

.Wrapper 
    { 
     position:relative; 
     width: 945px; 
     margin:auto; 
    }

. 상대 양식 대신 절대 양식을 배치하고 맨 아래부터 배치해야합니다. 이 같은 것은 : http://jsfiddle.net/ndqna/2/

그 효과는 아직 완벽하지는 않습니다. 이미지의 크기가 변함에 따라 양식의 위치가 변경되어야합니다. 백분율을 사용하여 입장에 접근 할 수 있습니다. 이런 식으로 뭔가 : http://jsfiddle.net/ndqna/3/

.Form 
{ 
    position: absolute; 
    bottom: 10%; 
    left: 15%; 
    border: solid 1px #000; 
}

당신이 그것을 알 수 있듯이 아직 완벽하지 않습니다. 정확한 위치 지정을 원한다면 정확한 위치를 계산하기 위해 스크립팅을해야합니다. 그러나 jQuery 코드를 작성하기 전에 양식의 배경으로 '상자'를 설정하고 원본 이미지를 분할하여 페이지의 배경 이미지에서 제거하지 않는 것이 어떻습니까? 상자가 양식과 함께 이동하므로이 방법은 위치가 픽셀 완벽해야 할 필요가 없습니다 ...

출처

2013-04-11 18:58:08 Pevara

비록 이것이 나던 100 % 작동하지만, 이것은 답변에 가장 가까운 것입니다. 그래서 나는 그것을 표시 할 것이다. 감사 –

. 폭의 최소 또는 최대 값을 사용하지 말고 고정 폭을 사용하십시오.

랩퍼의 최대 크기를 설정하고, 단지 이미지가 100 % 폭을 차지해야 우선

Fiddle

출처

2013-04-11 18:33:31

이렇게하면 이미지의 크기가 계속 증가하고 줄어들 것입니다. 브라우저가 사라졌다? 크기를 조정할 때 여전히 100 % 너비/높이의 크기를 조정하지 않습니다. 감사합니다 –

이런 식으로 http://jsfiddle.net/mohammadAdil/r9wSX/1/ –

요소를 창에서 같은 위치에 배치합니다. 크기 조정

답변

관련 문제