CSS를 사용하여 div에서 배경 이미지 크기 조정

CSS를 사용하여 div에서 배경 이미지 크기 조정 [중복]

---

이 질문에 이미 답변이 있습니다.

• CSS로 배경 이미지의 크기를 설정 하시겠습니까? 18 답변

css 아래에서는 두 div에 개별 배경을 설정합니다. div 크기에 맞지 않으면 이미지가 반복됩니다.

div에 필요한 공간에 맞게 CSS를 사용하여 이미지를 늘리려면 어떻게해야합니까?

<style type="text/css">   
#contentMain {  
  margin-bottom: 5%; 
  margin-top: 10%;
  margin-left: 10%;
  margin-right: 10%;
  background: url( /jQuery/mypage/img/background1.png )
}  
#page1 {    
  background: url( /jQuery/mypage/img/background2.png )  
} 
</style> 

---

대답

여러 옵션이 있습니다.

1. background-size: 100% 100%; -이미지가 늘어납니다 (브라우저에 따라 화면 비율이 유지 될 수 있음)
2. background-size: contain; -이미지는 가로 세로 비율을 유지하면서 자르지 않고 늘어납니다.
3. background-size: cover; -이미지가 가로 세로 비율을 유지하면서 요소를 완전히 덮습니다 (이미지가 잘릴 수 있음).

/ 편집 : 그리고 이제 더 많은 것이 있습니다 : https://alligator.io/css/cropping-images-object-fit

Codepen 데모

2017 업데이트 : 미리보기

다음은 차이점을 보여주는 일부 브라우저의 스크린 샷입니다.

크롬

---

Firefox

---

가장자리

---

IE11

테이크 아웃 메시지

background-size: 100% 100%; 예측 불가능한 결과를 생성합니다.

자원

• https://alligator.io/css/cropping-images-object-fit

---

나는 이것을 사용하는 것이 좋습니다.

  background-repeat:no-repeat;
  background-image: url(your file location here);
  background-size:cover;(will only work with css3)

도움이되기를 바랍니다 : D

그리고 이것이 당신의 필요를 지원하지 않는다면 그냥 말하십시오 : 다중 브라우저 지원을 위해 jquery를 만들 수 있습니다.

---

CSS의 새로운 기능을 지원하는 브라우저 의 background-size 속성을 사용합니다 .

참고 URL : https://stackoverflow.com/questions/6028737/resize-background-image-in-div-using-css