4中心圖像HTML/CSS自舉

我把它給我的屏幕上工作，但是當我把它更大的顯示器上似乎並沒有擴展的權利。任何建議？

<div style="margin-left: 100px;margin-right: 100px;"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -1.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img s src="img/NUESTROS EVENTOS -2.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -3.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -5.png"> 
      </div> 
     </div> 
    </div>

這就是我得到這個其他代碼，焦點，但無法擺脫的空間。

---這是我得到的---

<div class="row" style="margin-bottom: 70px;"> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInLeft "> 
     <div class="thumbnail "> 
      <img src="img/NUESTROS EVENTOS -1.png"> 
     </div> 
    </div> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInLeft "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -2.png"> 
     </div> 
    </div> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow swing "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -3.png"> 
     </div> 
    </div> 
    <!-- column --> 

    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInRight "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -5.png"> 
     </div> 
    </div> 
</div>

來源

2017-04-07 Rodolfo Rodriguez

可以還張貼你的CSS，另外，我不是真的確定你在問什麼？水平居中？垂直？截圖視覺上正確或不正確？ –

是所有圖像的寬度和高度相同嗎？ –

你想要的輸出是什麼？你是否嘗試使用img-responsive這個類作爲img標記/ –

您可以使用inline-block元素，我已經創建inline-block類來包裝img，給text-center類row對齊圖片在中心。

.row-custom .inline-block{ 
 
    display:inline-block; 
 
} 
 
.row-custom .inline-block img{ 
 
    max-width:100px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-custom text-center"> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img s src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
</div>

來源

2017-04-07 10:04:35

但是，如果窗口變大，圖像之間獲得空間 –

更新回答，檢查一次 –

謝謝。終於明白了，我遇到了問題。 –

做這些三件事情的願望得以實現result-

.img-responsive類添加到您的img標籤作爲其使圖像響應的方式引導框架。您也可以查看此link以供參考。

2.將寬度=「100％」添加到圖像以佔用圖像中可用的全部空間。

3.將nopadding類添加到列，以便它將刪除填充空間。

更新您的代碼如下：

.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" width="100%" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img s src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
</div> 
 
</div>

來源

2017-04-07 10:01:28

該類確實使圖像響應，但僅當窗口很小時，例如：[link]（http ：//imgur.com/a/RE1IN），如果窗口變大：[鏈接]（http://imgur.com/a/FD7SX）圖像獲取空間我不想要這些空間。感謝您的幫助 –

沒有問題我已經更新了我的答案..希望它可以幫助 –

感謝您的幫助！它的工作太 –

不需要更改或添加更多到CSS，您可以使用引導類：

<div class="row"> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -1.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -2.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -3.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -5.png"> 
    </div> 
</div>

來源

2017-04-07 10:10:13

4中心圖像HTML/CSS自舉

回答

相關問題