div 가로 세로 비율을 유지하는 CSS 응답 버튼

Question

이것은 특정한 질문입니다. 여기

<div id="d_btn"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
</div> 

은 jsfiddle입니다 : https://jsfiddle.net/fcjwjutb/

당신은 하나의 투명 픽셀 화면의 base64로 데이터 덕분에 정말 배경 이미지와 단지 사업부 인 이미지 버튼을 생성하고 있음을 알 수 있습니다 비율은 항상 1 : 1입니다 (다른 픽셀 w/h는 다른 종횡비를 나타냅니다). 마우스를 올리면 이미지가 변경됩니다.

문제는 다음과 같습니다. 창 크기를 세로로 조정하면 가로 세로 비율이 나빠집니다.

그러나 페이지를 새로 고침하면 자동으로 화면 비율이 정상으로 돌아갑니다.

내가 원했던 것은 새로 고침하지 않고도 창 크기를 조정할 때 가로 세로 비율을 유지하는 것입니다. 이것을 달성하기 위해이 구체적인 예에서 무엇을 변경해야합니까? JS가 아닌 CSS 응답을 찾고 있습니다.

---

여기의 가로 세로 비율을 유지하기 위해 "트릭"당신은 단지 높이 또는 너비 만 설정하면 관련된 이미지가 있다면, 다른 매개 변수가 자동으로 규모를 유지해야한다는 사실, 즉 .1 화소가 무엇인지입니다.

왜 페이지 크기가 처음 제대로로드 될 때이 크기가 작아 지는지 알 수 없습니다.

문제는 크기를 조정할 때 div의 배경 이미지가 스트레칭되는 대신 잘리는 것 같아요. 하지만 div 자체도 크기가 조정되고 내부의 img 자식은 크기가 조정되지 않고 의도 한대로 종횡비가 유지됩니다.

사업부와 이미지 크기가 일치해야한다 : 일부 잘못된 답변을보고 난 후에

---

는 내가 분명히 뭔가를 만들어 보자. 호버 이벤트는 이미지 위에 마우스를 올리면 트리거되어야합니다. 그렇지 않으면 '버튼'처럼 느껴지지 않습니다. 기본적으로 이미지보다 큰 div를 가질 수 없으며, 그렇지 않으면 마우스로 가리키는 이벤트를 발생시키는 빈 영역을 만듭니다.

내가 찾고있는 답변은 배경 이미지가 항상 전체 div를 포함하는 동안 창 크기를 조정하는 동안 가로 세로 비율을 유지하는 방식으로 div 자체를 크기를 조정할 수있는 것입니다.

Answer 1

background-size 속성을 사용하면 배경 이미지가 지정된 컨테이너 내에서 가로 세로 비율을 유지하도록 할 수 있습니다.

이와 같은 요소에 ID를 사용하는 것은 나쁜 습관입니다.

나는 또한 플렉스 박스에 지금 센터 페이지 요소 수직 & 수평을 사용할 수 있습니다 https://jsfiddle.net/x18h41yr/

... 당신을 위해 문제를 해결했다. flexbox에 대한 자세한 정보는 here