CSS中心イメージ有効画面幅、モバイルビュー

ブートストラップを使用しているときにヘッダーイメージのスタイリングに問題があります。イメージは常に中央に配置されていますが、ページの下部には左右スクロールがあります。それは迷惑でしたが、モバイルデバイスで問題なく動作しました。さて、最近のいくつかのアップデートでは、ウェブサイトが私の電話に正しく表示されません（キャッシュがクリアされています）が問題です。問題の原因を特定しましたが、ブートストラップやモバイルデバイスでCSSを修正するには十分な知識がありません。このウェブサイトはSamsSocial.comであり、デバッグを容易にするライブの例を見ることができます。何か助けてもらえれば幸いです。CSS中心イメージ有効画面幅、モバイルビュー

二つの編集が問題良く作製するのに有用となっているが、私の問題は完全に解決されていない

<style> 
.header_img { 
    position: relative; 
    left: 50%; 
    margin-left: -950px; 
} 
</style> 
<script> 
    function preload(arrayOfImages) { $(arrayOfImages).each(function(){  $('<img/>')[0].src = this;  });} 
    preload([ 
     "{{ asset('images/header_thin/header2-center_thin_01.png') }}", 
     "{{ asset('images/header_thin/header2-center_thin_02.png') }}", 
     "{{ asset('images/header_thin/header2-center_thin_03.png') }}", 
     "{{ asset('images/header_thin/header2-center_thin_04.png') }}", 
    ]); 
</script> 

<body> 
<div class="header_img hidden-print"> 
    <table width="1900" height="98" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td rowspan="2"><img src="{{ asset('images/header_thin/header2-center_thin_01.png') }}" width="840" height="98" alt=""></td> 
      <td><a href="{{ url('/') }}"><img src="{{ asset('images/header_thin/header2-center_thin_02.png') }}" width="238" height="59" alt=""></a></td> 
      <td rowspan="2"><img src="{{ asset('images/header_thin/header2-center_thin_03.png') }}" width="822" height="98" alt=""></td> 
     </tr> 
     <tr><td><img src="{{ asset('images/header_thin/header2-center_thin_04.png') }}" width="238" height="39" alt=""></td> 
     </tr> 
    </table> 
</div>

EDITありがとうございます。デスクトップ上ではすべてのサイズですべてが表示されますが、私が自分の携帯電話を引き上げると、ズームアウトは-950に残っている余裕を信じています（私はこれが正しいと思います）。誰かがこれを修正する方法を知っていれば、それは非常に感謝します。私はこれを行うためには、「最大幅」または最小幅を使用してみてください

body { 
    overflow-x:hidden; 
} 
.header_img { 
    position: relative; 
    left: 50%; 
    margin-left: -950px; 
    width:1900px; 
    max-width: 100%; 
}

出典

2017-07-19 Pete

テーブルはlayot/styling用ではありません。適切なマークアップを使用する – pethel

サンプルコードでブートストラップがどこに使用されているのかわかりません。ブートストラップの主な目的は、あなたのウェブサイトをレイアウトするために柔軟で反応性の高いグリッドを提供することです...しかし、あなたはレイアウトに '

'を使用しています。これはアンチレスポンス/アンチブートストラップです。データを表示するには、 '

' 'のみを使うべきです。あなたはあなたの設定に敏感な問題を抱えています – zgood

大丈夫です..私はこの画像をどこにスライスしたのですか...私は画像を別々にスライスしたことはありませんでした。私はそれがかなりの量であるので、一般的なブートストラップCSSを含まなかった。私は実際にCSSでこれをフォーマットする適切な方法を知らない。そこには良い方法がありますか？ – Pete

答えて

テーブル以外にも、他のどのような方法で簡単に写真を組み合わせて行う方法がわからないんだけど画像に応答する。 width：100％を定義してから、max-widthとmin-widthを定義することができます。私はそれを修正すると思います。

出典

2017-07-19 20:25:19

CSS中心イメージ有効画面幅、モバイルビュー

答えて

関連する問題