Question

目前尝试显示我的img全长，当浏览器（chrome最新）宽度为400px时，img下面有一些空格：

当我使浏览器宽度为470px时，没有问题。如何为400px的移动视图修复此问题？

这是相关片段：

<div class="visible-xs">
                  <div class="col-xs-12 employee">
                    <div class="col-xs-4"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt=""></div>
                    <div class="col-xs-8">
                      <div><span class="name"> Isabelle &nbsp;Clarke</span></div>
                      <div>International Group Engineer</div>
                      <div>39</div>
                      <div>10/07/2016</div>
                      <div>Vel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
                    </div>
                  </div>
</div>

Answer 1

此解决方案将使图像全高但伸展。你可以添加flex显示和使用高度：100％像这样：

@media all and (max-width:470px) {
  .employee {
      display:flex;
  }
  .employee img {
     height:100%;
  }
}

如何让img在手机中显示全长？

1 个答案: