배경에서 CSS 만 사용해서 이미지 늘리기 및 크기 조정

 

질문 : 백그라운드에서 CSS 이미지 늘리기 및 크기 조정-CSS 만 사용

---

브라우저 뷰포트 크기에 따라 배경 이미지가 늘어나고 크기가 조정되기를 원합니다.

예를 들어 Stretch 및 Scale CSS 배경과 같은 작업을 수행하는 Stack Overflow에 대한 몇 가지 질문을 보았습니다. img 태그가 아닌 background 사용하여 이미지를 배치하고 싶습니다.

그 img 태그가 배치되고 CSS로 img 태그에 찬사를 보냅니다.

width:100%; height:100%;

작동하지만 그 질문은 조금 오래되었으며 CSS 3에서 배경 이미지 크기를 조정하면 꽤 잘 작동한다고 말합니다. 이 예제를 첫 번째 예제로 시도했지만 제대로 작동하지 않았습니다.

background-image 선언으로 수행하는 좋은 방법이 있습니까?

답변

---

background-size:cover 라는 멋진 작은 속성이 있습니다.

가로 세로 비율을 유지하면서 배경 영역이 배경 이미지로 완전히 덮 이도록 이미지 크기를 조정합니다. 전체 영역이 커버됩니다. 그러나 크기 조정 된 이미지의 너비 / 높이가 너무 크면 이미지의 일부가 보이지 않을 수 있습니다.

출처 : https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only