使图像和填充响应引导程序

问题描述：

有人可以帮助我使我的图像和它周围的填充响应？我尝试了填充%而不是px，并且将img-fluid类添加到了我的图像中。它的工作原理在一定程度上，但如果我让我的窗口太宽，我的形象下车中心：使图像和填充响应引导程序

如果屏幕不是一样宽，图像正常工作：

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/

在此先感谢！

你有没有尝试添加'显示：弯曲; justify-content：center;'你的'.card-header-img'？顺便说一句，你可以摆脱你的填充或将其设置为简写'padding：10％;' – Krusader

目前尚不清楚你想实现什么：如果在所有分辨率中保留相同的填充，图像将被裁剪/拉伸。如果你只是想中心图像，然后将'text-align：center'添加到'.card-header-img' –

谢谢所有!!!!!! –

答

add margin：0px auto;

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

它的工作原理

嗨 - 道歉，但我张贴的jsfiddle有一个老版本的bootstrap（比我使用的老）。如果我使用bootstrap v3，我仍然会遇到同样的问题（我更新了我的jsfiddle）。你介意再帮我一次吗？ –

make .mainImage { height：400px; 宽度：100％; } – Gattbha

使图像和填充响应引导程序

相关推荐