Scalable side scroll trouble

최대 높이가 800px 인 큰 이미지로 구성된 수평 스크롤 이미지 패널을 만들고 싶습니다. 브라우저 크기를 조정할 때 브라우저 창 크기에 따라 전체 이미지 선택이 작아지기를 원합니다. 왼쪽 상단에 30px 여백 (페이지가로드 될 때)과 하단에 30px 여백을두고 이미지의 상단이 200px로 상단에 매달려 있습니다.Scalable side scroll trouble

이

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Dean Pauley — Recent work</title> 
     <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 
    <body> 
     <div id="infoleft"> 
      <ul> 
       <li><a href="index.html">Dean Pauley</a></li> 
       <li>Graphic Design</li> 
      </ul> 
     </div> 
     <div id="inforight"> 
      <ul> 
       <li><a href="#">Information</a></li> 
      </ul> 
     </div> 
     <div id="images"> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
      <img src="images/NFN800.jpg" width="948" height="800" id="fullsize" /> 
     </div> 
    </body> 
</html>

는 CSS :

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    font-family: 'Questrial', sans-serif; 
} 

#infoleft { 
    position:fixed; 
    top:20px; 
    left:0px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
} 

#infoleft ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#infoleft ul li { 
    display: inline; 
    padding: 30px; 
}  

#inforight {  
    position:fixed; 
    top:20px; 
    right:30px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
} 

#inforight ul { 
    height:20px; 
    font-weight:normal; 
    font-size: 15px; 
    letter-spacing: 0.13em; 
    text-decoration:none; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#images { 
    position:absolute; 
    left:20px; 
    bottom:30px; 
    top:200px; 
    width:25000px; 
    height:800px; 
    padding-top:100px; 
    padding-bottom:30px; 
} 

img { 
    padding:10px; 
} 

a { 
    text-decoration:none; color:#000; 
} 

a:hover { 
    color:#0080ff; 
}

는 무엇입니까

은 정말 어떤 도움이 전혀 크게

html로 지금까지 다음과 같습니다 감사하겠습니다이 정말 새로운 오전 이 작업을 수행하는 가장 효율적인 방법은 무엇입니까? 페이지로드에 adavnce에서 많은 감사

편집

On page load

On scroll

On 75% decrease window

스크롤

에

75 % 감소 창에서

출처

2012-01-10 Dean Pauley

이 이미지를 화면에 표시하거나 브라우저 창에 스크롤 막대가 있으면 좋습니까? –

@Zack Macomber 이미지를 보려면 오른쪽으로 스크롤하고 싶지만 높이는 이미지 위에 항상 200px, 아래에 30px가되도록 적절하게 조정해야합니다. 의미가 있기를 바랍니다. –

잘 설명해 준 것 같아요. , 그러나 나는 그것을보고 있지 않습니다 ... 어쨌든 당신이 갖고 싶은 것의 스크린 샷 모형을 보여줄 수 있습니까? 페이지가 전체 화면처럼 보일 것 같은 간단한 JPEG 몇 개를 만들 수 있고 브라우저의 크기가 50 %로 조정될 때의 모습을 보여 주면 (적어도 나를 위해) 도움이 될 것입니다. –

필자는 이미지 관련 크기 측정을 px가 아닌 %로 변경합니다. 그렇게하면 비율은 동일하게 유지되지만 이미지, 패딩, 여백 등의 크기는 브라우저 창의 크기에 따라 변경됩니다.

예 : img {width : 80 %; 높이 : 60 %; 등}

편집 잭의 대답의 일부를 사용

, 나는 당신의 CSS는 IMG 규칙을 변경할 것입니다 : 당신이 브라우저 창에 조정하는 이미지를 줄 것이다

img { padding:10px; width:3.799; height:100%; } 크기. 그러나 모든 비율을 동일하게 유지하기 위해 위치 지정 규칙 (예 : 왼쪽, 위쪽, 패딩, 여백 등)을 조정하려면 퍼센트 (%)를 사용해야합니다. 이 시점에서

주

나는 잭의 디자인이 더 효율적이다 기록에 대한 있도록 만, 예를 조정하고, 그리고 모양을 만족하면하면 좋을 것이다.

출처

2012-01-10 15:39:53 SamStar

위의 코드와 관련하여 예제를 보여줄 수 있습니까? –

확실하지만 내가 가지고있는 것을 확인하고 게시하기 전에 #images에 25000px의 너비를 넣었습니까? – SamStar

더 많은 프로젝트가 추가 될 것입니다. 비록 그들이 단지 예제 일 뿐이 라면서 그들은 모두 –

방법 "#images"와 "IMG"섹션에 대한 CSS 이러한 변경과 같은 ...에 대한

#images { 
    position:absolute; 
    left:20px; 
    bottom:30px; 
    top:200px; 
    border: 2px ridge gray; 
    width: 90%; 
    display: inline-block; 
    overflow: scroll; 
    white-space: nowrap; 
} 

img { 
    padding:10px; 
    width:50%; 
    height:95%; 
}

당신은 그 값들을 플레이 할 수 있지만 당신은 수평 스크롤 이미지 섹션을 얻어야한다

창 크기를 변경하면 그 변화 ...당신이 원하는 경우

당신은 회색 국경을 취할 수 - 난 그냥 테스트를 위해 그것을 사용했다 ...

는 것과 상대적 대신 절대 위치와 코드 샘플을 업로드

편집 이미지 섹션을 하단에서 30px로 유지합니다.

출처

2012-01-10 16:47:38

Scalable side scroll trouble

답변

관련 문제