일부 브라우저에서는 배경 이미지가 올바르게 유체가 아닙니다.

Question

#header 배경 이미지 유체를 만들어 모든 모바일 장치에서 멋지게 보이도록하려고합니다. 이 시뮬레이터를 사용하여 내 사이트를 테스트하고 있습니다 http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://toarumajutsunoindex.me/ 배경 이미지가 정확한 가로 세로 비율을 크롬에 표시하지 않지만 Firefox에서는 정상적으로 작동합니다. 진짜 아이폰에서 괜찮은지 모르겠다. 누구든지 배경 수정을 도와 줄 수 있습니까?

background-image: url(images/header.jpg); 
background-repeat:no-repeat; 
background-position:top; 
background-size: 100%; 
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
width: 100%; 

Answer 1

배경 이미지 (또는 그와 관련된 모든 이미지)의 백분율을 사용하면 화면 비율에 따라 비율이 변경되어 가로 세로 비율이 변경됩니다. 그런 일이 일어나기를 원하지는 않지만 화면에 맞추고 같은 치수를 유지하려면 다음 코드를 사용하고 그렇지 않으면 "표지"를 100 %로 변경하십시오. 이것은 크롬에서 작동해야하며 -ms-filter와 함께 IE에서도 작동해야합니다.

background: url(images/header.jpg) no-repeat top; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg',  sizingMethod='scale'); 
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg', sizingMethod='scale');