배경 이미지를 화면 크기로 만들기

-1

화면을 채우려는 배경 이미지를 원하고 가로 세로 비율이 줄어들지 않을까 걱정하지 않습니다. 모든 trued 한 ... 나는 분명 아무것도 누락 생각하지 않는다배경 이미지를 화면 크기로 만들기

html로 :

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("/imgs/CV.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: auto; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

The CSS:

body { 
 
    background-color: #93B874; 
 
    } 
 
</style> 
 

 
<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

미리보기 : http://soupedupkitchencom.fatcow.com/CV/CV.html

출처

2017-12-12 ClaaziX

이 코드를 포맷 SO 코드 조각을 사용하십시오 자리 표시 자 이미지의 원래 크기를 볼 – Justinas

이 body

의 규칙에 background-size: cover를 추가

또는 전체 배경 이미지가 표시되고 실제로 왜곡되지 않았는지 확인하려는 경우 이미지, 사용 가능 background-size: 100% 100%;

다음은 코드가있는 스 니펫입니다. 당신이 (당신이 그것을 가지고로) auto에 body의 배경 크기를 다시 변경하는 경우

.phone { 
 
    margin: auto; 
 
    height: 737px; 
 
    width: 654px; 
 
    background-image: url("/imgs/phone.png"); 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
} 
 

 
.container { 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    height: 536px; 
 
    width: 350px; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    display: block; 
 
} 
 

 
iframe { 
 
    width: 350px; 
 
    /* adjust to your needs */ 
 
    max-width: 100%; 
 
    /* to make it responsive */ 
 
} 
 

 
body { 
 
    background-image: url("http://placehold.it/200x150/fa0?text=this is an image"); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
The CSS:

<body> 
 
    <div className="phone" style="margin:auto; height: 630px;width: 558px; background-image:url(/imgs/phone.png); top:50%; left:50%;"> 
 
    <div className="container"> 
 
     <iframe style="height: 458.18px; width: 290px; margin: auto; position: relative; top: 85px; left: 132px;" src="http://foodsharing-production.herokuapp.com"></iframe> 
 
    </div> 
 
    </div> 
 
</body>

출처

2017-12-12 15:11:14 Johannes

어느 쪽도 없습니다 그 솔루션의 – ClaaziX

여기에 작동 - 내가 추가 한 발췌 문장을 참고 – Johannes

배경 이미지를 화면 크기로 만들기

답변

관련 문제