モバイルビューでロゴを切る

Question

私はレスポンシブデザインには新しく、私に同行してください。私は、ロゴ画像に次のCSSコードを適用し、彼&のために私のお父さんのサイトを構築しています：

img.logo {max-width: 500px; width:100%; margin-left: auto; margin-right: auto; display: block;} 

私は私のブラウザがより狭く作るしようとすると、問題が表示されます。画像は少し縮小されますが、スケーリングが停止します&は切り捨てられます。このページで私が話していることを確認できます：http://cellphonerepairus.com/test/old/samsung.html

私はmax-width: width-in-px; width:100%;を別のサイトで使用しました。私もmax-height: height-in-px; height:100%;を追加しなかったので、それが助けになるかどうか確認するために削除しました。いいえ。私は自分のページにビューポートメタタグを持っています。誰か助けてください。ありがとうございました！

Answer 1

ロゴのパディングのため、ロゴの実際の幅は最大530pxになります。

img.logo { 
    box-sizing: border-box; 
} 

または幅からパディングを削除するcalc()式：これを防ぐために、あなたはborder-boxと幅にパディングが含まれるように、ブラウザを伝えるためにボックスのサイズ変更を使用することができます。

img.logo { 
    width: calc(100% - 30px); 
} 

どちらのコードでも問題を解決できます。

注：私は通常、このコードを私の反応するサイトすべてで使用します。

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 

Answer 2

これは、ビューポートの幅の外側の要素をプッシュ.logo上padding: 15pxです。

あなたはパディングを削除、またはbox-sizing: border-box;

.logo { 
    text-align: center; 
    vertical-align: middle; 
    padding: 15px; 
    box-sizing: border-box; 
}