이미지를 중심에 두는 법 - CSS

나는 웹 사이트를 구축 중이며 2000px 크기의 이미지를 사용 중입니다. 이미지를 와이드 스크린 (예 : TV를 모니터로 사용)에서 볼 수 있지만 작은 화면에서는 이미지 크기가 해당 크기로만 표시됩니다. (나머지는 잘립니다). 문제는 뷰포트의 크기에 관계없이 이미지가 중앙에 있어야한다는 것입니다. 나는 응답 성있는 텍스트를 만들기 위해 text-align:center;을 사용했다. 나는 비슷한 주제를 읽었지 만 이미지가 정적이면서 중심에 있지 않은 상태에서도 상관 없습니다. 도와주세요.이미지를 중심에 두는 법 - CSS

는 HTML :

는

<body> 
    <div id="wrapper"> 

     <div class="header"> 
      <img src="images/design/header.png"> 
     </div> 

     <div class="nav-bar"> 
      <a href="index.html">Home</a> 
      <a href="about.html">About</a> 
      <a href="portfolio.html">Portfolio</a> 
      <a href="gallery.html">Gallery</a> 
      <a href="service.html">Service</a> 
      <a href="contact.html">Contact</a> 
     </div> 

     <div class="side-bar"> 
      <h1>This is my side bar</h1> 
     </div> 

     <div class="content"> 
      <h1>This is my content</h1> 
     </div> 

     <div class="footer"> 
      <h1>This is my footer</h1> 
     </div> 

    </div> 
</body>

CSS :

#wrapper { 
max-width: 2000px; 
margin: -8px; 
overflow: hidden; 
text-align: center; 
}

출처

2013-12-14 user3102271

한 가지 방법은 반응 레이아웃을 사용하는 것입니다. Twitter Bootstrap은 기본적으로 같은 것을 제공합니다.

또 다른 방법은 @media 태그를 사용하는 것입니다. http://www.w3schools.com/css/css_mediatypes.asp을 참조하십시오. 여기서는 다음과 같은 함수를 만들어야합니다. mediacheck를 사용하여 화면 크기를 가져온 다음 @media를 사용하여 임계 값을 설정합니다.

출처

2013-12-14 13:56:28 Ranveer

이미지 센터를 만들려면 다음 CSS를 사용하십시오. max-width:100%은 컨테이너가 이미지 너비보다 작은 경우 이미지에 맞습니다. 이미지 너비 및 높이가 줄어들어 적합합니다. 당신은 이미지의 정확한 높이를 알고있는 경우

#wrapper > .header img 
{ 
display: block; 
height: auto; 
max-width: 100%; 
margin:0 auto; /* to make the image center of its container, if container is larger than image size */ 
}

업데이트

, 다음 this 바이올린을 참조하시기 바랍니다. 이미지 자르기를 보려면 fullscreen 크기를 조정하십시오.

HTML :

는

<div class="position-img-outer"> 
    <div class="position-img-inner"> 
     <img src="http://placehold.it/1000x300" class="position-img" alt="img" style=" height: 300px; " /> 
    </div> 
</div>

CSS : 당신이 이미지의 폭을 알고 있다면

.position-img-outer 
{ 
    height: 300px; 
    margin: 0 auto; 
    overflow: hidden; 
} 
.position-img-outer .position-img-inner 
{ 
    display: inline-block; 
    position: relative; 
    right: -50%; 
} 
.position-img-outer .position-img-inner .position-img 
{ 
    position: relative; 
    left: -50%; 
}

출처

2013-12-14 14:08:18 Ravimallya

나는 이것을 이미 시도했지만 뷰포트와 함께 두 축의 이미지 크기를 조정합니다. 어쨌든 당신을 감사하십시오! – user3102271

업데이트 된 답변을 참조하십시오. – Ravimallya

훌륭한 작품! 이미지 주변의 흰색 틈을 제거 할 수있는 방법이 있습니까? 감사! – user3102271

, 당신은 사용하여 다음을 수행 할 수 있습니다

는

#wrapper .header img{ 
    position:relative; 
    width:2000px; 
    left:50%; 
    margin-left:-1000px; 
}

UPDATE : 은을 방지하려면 가로 스크롤 막대에서 컨테이너 요소를 width:100% 및로 설정할 수 있습니다.

#wrapper .header { 
    position:relative; 
    width:100%; 
    overflow:hidden; 
}

출처

2013-12-14 14:08:51 greenish

이것은 내가 필요한 것입니다. 고맙습니다! – user3102271

난 그냥 내 랩톱 에서이 시도하고 가로 스크롤 막대가 발생합니다. 그것을 피할 수있는 방법이 있습니까? 감사합니다 – user3102271

나는 내 대답을 업데이트, 이것이 작동한다고 생각합니다 – greenish

이미지를 중심에 두는 법 - CSS

답변

관련 문제