有人可以幫助我使我的圖像和它周圍的填充 響應?我嘗試了填充%
而不是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' –
謝謝所有!!!!!! –