Question

如何使用bootstrap根据屏幕尺寸居中配置文件图像？

到目前为止我做了什么：

HTML：

<div class="col-md-12">
  <div class="col-md-2 col-xs-12">
    <div class="deck">
      <img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">    
    </div>
    <div class="title-users-list-profile"> 
        <img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
    </div>

  </div>

</div>

CSS：

.deck{
  display: flex;
}
.comments-author {
  border-radius: 50%;
  border: 6px solid #fff;
  margin: 5px;
  box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}   
.title-users-list-profile img{
  position: relative;
  width: 50px;
  height: 50px;
  top: -35px;
  left:50px;
  margin-top: 8px;
  margin-bottom: -25px;
}

https://jsfiddle.net/tzc2gdcf/

Answer 1

您可以使用弹性框来对齐图像。查看本指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 并使用@media将特定规则用于单个媒体大小

Answer 2

如果您只想让图像中心基于当前尺寸，您可以查看添加媒体查询。将根据像素宽度等改变css规则。 https://getbootstrap.com/docs/3.3/css/

如何使用bootstrap

2 个答案: