2017-10-16 83 views
0

有人可以幫助我使我的圖像和它周圍的填充 響應?我嘗試了填充%而不是px,並且將img-fluid類添加到了我的圖像中。它的工作原理在一定程度上,但如果我讓我的窗口太寬,我的形象下車中心:Image becomes off center使圖像和填充響應引導程序

如果屏幕不是一樣寬,圖像正常工作:

Image is centered

HTML:

<div class="Aligner"> 
     <div class="Aligner-item"> 

    <div> 
     <div class="card authenticationRequest" style=""> 
     <div class="card-header-img"> 
      <img class="card-img-top mainImage img-fluid" src="https://i.pinimg.com/736x/bc/be/e6/bcbee6931f71db0d1629355bd61fe8cd--wolves-mans.jpg" alt="Smiley face" height="42" width="42"> 
     </div> 
     <div class="card-block"> 
      <p>Hi</p> 
      <p>Hello</p> 
      <p>Its</p> 
      <p>Me</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    </div> 

CSS:

@import url('http://getbootstrap.com/dist/css/bootstrap.css'); 

.Aligner { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: 2%; 
} 

.Aligner-item { 
    width: 50%; 
} 

.mainImage { 
    height: 400px; 
    width: 300px; 
} 

.card-header-img { 
    background-color: #cf0000; 
    /* padding: 40px 20px 40px 20px; */ 
    padding: 10% 10% 10% 10% 
} 

有人可以幫忙嗎?這裏是我的jsfiddle:

https://jsfiddle.net/DTcHh/38370/

在此先感謝!

+0

你有沒有嘗試添加'顯示:彎曲; justify-content:center;'你的'.card-header-img'?順便說一句,你可以擺脫你的填充或將其設置爲簡寫'padding:10%;' – Krusader

+1

目前尚不清楚你想實現什麼:如果在所有分辨率中保留相同的填充,圖像將被裁剪/拉伸。如果你只是想中心圖像,然後將'text-align:center'添加到'.card-header-img' –

+0

謝謝所有!!!!!! –

回答

1

add margin:0px auto;

.card-header-img { 
    background-color: #cf0000; 
    padding: 10% 10% 10% 10%; 
    margin: 0px auto; 
} 

它的工作原理

+0

嗨 - 道歉,但我張貼的jsfiddle有一個老版本的bootstrap(比我使用的老)。如果我使用bootstrap v3,我仍然會遇到同樣的問題(我更新了我的jsfiddle)。你介意再幫我一次嗎? –

+1

make .mainImage { height:400px; 寬度:100%; } – Gattbha