Question

我是网络开发的新手，希望你能在下面帮助我：

我在移动设备上创建自适应图像时遇到问题。

这是我对codepen和代码的链接：

[1] [1]：https://codepen.io/Qiyang/pen/EwEKMz

<div class="container">
  <div class="jumbotron">
<h1 class="text-center"><b>Sir Alex Ferguson</b></h1>
<h2 class="text-center 16px"><font size="5">Manchester United legend</h2>
  <figure>
    <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2016/10/nintchdbpict000277927275.jpg?w=960">

如您所见，我已将img-responsive类添加到我的图像中，但在我的三星手机上，图像仍然伸出屏幕，导致滚动。

如果我添加最大宽度：100％;图像更合适，尽管它仍然会稍微偏离。这可能是由于我设置的边距，但不是img-responsive类应该相应地调整图像大小以适应？

如果课程只调整屏幕而不是jumbrotron，你会如何建议编写适合jumbotron的代码？

由于

Answer 1

我可以看到你使用margin-left来进行img-resposive，这就是你的图像溢出的原因。

{ path: '**', redirectTo: 'yourCustomComponent'}

更改为此，您的代码将有效。

移动响应式设计 - ＆gt; Img-responsive不工作

1 个答案: