モバイル応答デザイン - > IMG-応答私はWeb開発に新たなんだ

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応答クラスを追加しましたサムスンの携帯電話では、画像がまだ画面から伸びていて、スクロールしています。

max-width：100％を追加すると、少しでも外れてもイメージは良くフィットします。マージンが設定されている可能性がありますが、それに合わせてイメージのサイズを変更する必要があるimg-responsiveクラスではありませんか？

クラスがジャンクトロンではなく画面にのみリサイズされる場合、ジャンクトロンに合わせてコードを書くことをどのようにお勧めしますか？

おかげ

Answer 1

私はあなたが使用するのmargin-leftあなたのイメージがあふれている理由であるIMG-resposive用を持って見ることができるように。

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

これに変更するとコードが機能します。