移动响应式设计--> Img-responsive 不起作用

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 类添加到我的图像中，但在我的三星手机上，图像仍然延伸到屏幕之外，导致滚动。

如果我添加一个 max-width:100%;，图像会更合适，尽管它仍然会偏离一点。这可能是由于我设置的边距，但 img-responsive 类不应该相应地调整图像大小以适应吗？

如果类只调整到屏幕而不是 jumbrotron，您会如何建议编写代码以适应 jumbrotron？

谢谢

Answer 1

正如我所见，您对 img-resposive 使用了 margin-left，这就是您的图像溢出的原因。

.img-responsive { margin-left: 0; max-width: 100%;}
figure {text-align: center;}

改成这个，你的代码就可以工作了。