如何分辨圖像保持居中 - CSS

我正在建立一個網站，我使用的是2000像素寬的圖像。我希望圖像在寬屏幕上可見（如我的 - 即時通訊使用電視作爲顯示器），但較小的屏幕只能看到足夠大的圖像尺寸。（休息會被裁剪）。問題是無論視口的大小如何，圖像必須居中。我使用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%和overflow:hidden

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

來源

2013-12-14 14:08:51 greenish

這正是我所需要的。謝謝！ – user3102271

我剛剛在我的筆記本電腦上試過這個，它會導致水平滾動條。有什麼辦法可以避免它？謝謝 – user3102271

我更新了我的答案，我認爲這應該起作用 – greenish

如何分辨圖像保持居中 - CSS

回答

相關問題