JS Supersized plugin - 이미지가 뷰포트 가장자리에서 자르다

그래서 Supersized 플러그인 (http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/)을 사용하여 표시합니다. 아름 다운 배경 이미지 사이트 뒤. 일반적으로 브라우저 창 크기에 맞게 확장됩니다. iPad에서는 뷰포트 끝에 배경이 잘립니다. 나는 전체 사이트를보고 꼬집고 잘 확대 할 수 있습니다. 그러나 배경은 그대로 유지됩니다.JS Supersized plugin - 이미지가 뷰포트 가장자리에서 자르다

가장 중요한 것은 콘텐츠의 길이와 높이를 채우는 이미지입니다. 아래 링크와 CSS :

http://www.xsp.com/new_site/index.php

어떤 도움

크게 여기에 총을 아래에, 감사합니다. 감사.

/* Supersized styles */ 
    #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;} 

    #supersized { display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; } 
    #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; } 
    #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/ 
    #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }   /*Quality*/ 

    #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; } 
    #supersized a { width:100%; height:100%; display:block; } 
    #supersized li.prevslide { z-index:-20; } 
    #supersized li.activeslide { z-index:-10; } 
    #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; } 
    #supersized li.image-loading img{ visibility:hidden; } 
    #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; } 
    /* Supersized styles end */

출처

2012-03-30 Dave Rottino

iPhone/iPad CSS 쿼리로 해결할 수있는 한 가지 방법을 찾아 냈습니다. 그것은 아마도 최선의 방법이 아닙니다. 테이프를 붙이는 것보다 더 낫습니다. 그러나 그렇게 작동 나는 행복 해요 :

/*Fix Supersized on iOS*/ 

/* iPad [portrait + landscape] */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
#supersized { margin-left:0;} 
} 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
#supersized { width:110% !important;} 
} 


/* iPhone [portrait + landscape] */ 
@media only screen and (max-device-width: 480px) { 
#supersized { margin-left:0; } 
}

출처

2012-04-13 17:24:36

좋은 소식은, 내가 처음 대응 '응답을 사용하여 얼마 전에 작업을 받고 있습니다입니다. 나쁜 소식은 다른 회사에서 인수하여 웹 사이트 디자인이 더 이상 필요 없다는 것입니다. 이 코드를 보내 주셔서 감사합니다. 나는 그것을 향후 프로젝트에 확실히 통합 할 것입니다. –

문제는 이미지 "최대 폭 : 100 %"의 모든 기본 설정 일반 CSS에서 뭔가 IMG {이 경우 CSS 리셋을 확인 최대 폭 : 100 %; 당신이 공식 솔루션에 따라 그것을 해결할 수없는 경우 https://github.com/buildinternet/supersized/issues/103

, 당신의 초대형 CSS에서이 문제를 추가하려고}

는 초대형 관계자는 파일의 솔루션 "supersized.3.2.7.js"가 :

#supersized img { max-width: none; }

이 까다로운은 http://blog.valderama.net/node/30

출처

2013-09-15 10:28:54 bard

JS Supersized plugin - 이미지가 뷰포트 가장자리에서 자르다

답변

관련 문제