이미지 크기를 비례 적으로 변경할 수 없습니다.

주 이미지가 작동하는 버튼이있는 카메라 인 대화 형 웹 사이트를 구축 중입니다. 사용자가 클릭 할 수 있도록 버튼을 배치하고 싶습니다. 전폭으로 잘 배치 할 수 있으며 카메라 크기를 작게 조정하면 카메라의 크기가 아름답게 조절됩니다. 반면에 정보 버튼은 절대로 움직이거나 크기가 조정되지 않습니다.이미지 크기를 비례 적으로 변경할 수 없습니다.

는

HTML :

는

<div class="camera"> 
    <div id="about_pos"> 
    <div id="about"> 

    </div> 
</div> 
</div>

CSS :

나는 내 실수가 특정 높이와 너비에 맞게 버튼을 강요하는 것 같습니다 인터넷에서 본 것을에서

.camera { 
position: relative; 
width: 100%; 
height: 100%; 
background-image: url('../images/camera.png'); 
background-repeat: no-repeat; 
background-size: contain; 
background-position: center; 
} 

#about { 
    display: block; 
    width: 55px; 
    height: 55px; 
    background-image: url('../images/about_bw.png'); 
    background-repeat: no-repeat; 
} 

#about:hover { 
    background-image: url('../images/about.png'); 
} 

#about_pos{ 
    float: left; 
    padding-left: 128px; 
    padding-top: 77px; 
}

,하지만 그건 어디 실제 문제가 발생합니다. 자동 또는 100 %로 설정하려고하면 이미지가 모두 손실됩니다.

나는 모든 시나리오를 시도한 것처럼 느껴지고 아무도 작동하지 않는다. 이것에 대한 어떤 생각이라도 대단히 감사하겠습니다.

다음은 답변으로 표시했지만 답변의 나머지 부분은 설명 섹션 하단에 있습니다.

HTML 이미 .camera에 있고 #about_pos에 position: absolute를 추가

 <div class="camera"> 
     <div class="buttons" id="about"> 

     </div> 
    </div>

CSS 상대 위치의

.camera { 
position: relative; 
width: 100%; 
height: 100%; 
background-image: url('images/camera_with_buttons.png'); 
background-repeat: no-repeat; 
background-size: 90%; 
background-position: center top; 
} 

.buttons{ 
display: block; 
width: 4vw; 
height: 4vw; 
margin-left: 1vw; 
margin-top: 1vw; 

border-radius: 50%; 
position: absolute; 
} 

#about { 
top: 5.6vw; 
left: 6.2vw; 
} 

#about:hover { 
background-size: cover; 
background-image: url('images/about.png'); 
background-repeat: no-repeat; 
}

출처

2017-11-13 rlearning

이 질문에가 중복됩니다. 이에 대한 답변은 https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css?rq=1에서 확인하십시오. – pjones235

너비 또는 높이에 대해 auto for 또는 %를 사용하면 문제가 여전히 존재합니다. 화면에서 버튼을 모두 잃어 버립니다. – rlearning

#about_pos div에 부동을 설정 했으므로 잃어 가고 있습니다. 그것을 제거하거나'overflow : hidden'을 추가하십시오. –

만들기 사용 : 여기

는 최종 코드입니다. 백분율 또는 뷰포트 단위 (vh 및 vw)를 사용하여 위치를 지정하십시오 (예 : top: 30%). 또는 단추의 세로 위치가 .camera 너비에 상대적 인 경우 top: 25vw을 사용할 수 있습니다.

또한 about_pos div에서 float를 제거하고 절대 div parent 인 about_pos를 사용하여 위치 지정을 수행하기 때문에 버튼의 크기를 px로 유지할 수 있습니다.

업데이트 width: 7vw; height: 3vw; 또는 유사한

업데이트 2

당신은 #about_pos을 제거 할 수 있습니다를, 화면 폭의 변화에 따라 버튼의 크기를 조정 사용하려면

다음과 같이 간단하게 처리하십시오.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.camera { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('http://www.kenrockwell.com/nikon/d800/d800-back-1200.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    background-position: center top; 
 
} 
 

 
#about { 
 
    display: block; 
 
    width: 8vw; 
 
    height: 8vw; 
 
    margin-left: -4vw; 
 
    margin-top: -4vw; 
 
    border-radius: 50%; 
 
    background: orange; 
 
    position: absolute; 
 
    top: 23.5vw; 
 
    left: 71.6vw; 
 
    opacity: 0.7; 
 
    cursor: pointer; 
 
} 
 

 
#about:hover { 
 
    background: yellow; 
 
}

<body> 
 
    <div class="camera"> 
 
     <div id="about"> 
 

 
     </div> 
 
    </div> 
 
</body>

출처

2017-11-13 21:50:33

당신이 제안한대로 about_pos가 변경되어 더 가까워졌습니다. 아래에서 브라우저를 크기 조정할 때 버튼이 ** 대략적인 영역에 머물러 있다는 것을 알았지 만 ** 결코 크기를 조정하지 않습니다 **. \t '#about_pos { \t \t 위치 : 절대; \t \t 왼쪽 : 20vh; \t \t 상단 : 6vw; \t} ' – rlearning

버튼 크기를 조정하려면 px 또는 뷰포트 단위를 사용하십시오 –

대답을 –

이미지 크기를 비례 적으로 변경할 수 없습니다.

답변

관련 문제