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>

編輯

兩個編輯一直在做的問題更好有用的，但我的問題並沒有完全解決。在所有尺寸的桌面上，一切都很好，但是當我拉起手機時，它允許縮放我相信在-950（我認爲這是爲什麼它是在右邊）的左邊緣。如果有人知道如何解決這個問題，將會非常感激。我也不知道怎麼做的不是表

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

來源

2017-07-19 Pete

表格不適用於打樣/造型。使用適當的標記 – pethel

我沒有看到你的示例代碼中使用了Bootstrap。 Bootstrap的主要目的是提供一個靈活的響應式網格來佈局您的網站......但是您正在使用'

'進行佈局，這與反應/反Bootstrap相似。您應該只使用'

'來顯示數據。你會有你的設置 – zgood

好的響應性問題..我有這個圖像我切片的地方...我從來沒有看到一個圖像切片不同，所以我不得不查看如何做到這一點。我沒有包括一般的bootstrap css，因爲它的數量很大。我其實不知道在CSS中設置格式的正確方法。有沒有更好的辦法？ – Pete

回答

嘗試使用「最大寬度」或最小寬度以外的任何方式輕鬆組合的照片，以使該圖片響應。您可以定義寬度：100％，然後定義最大寬度和最小寬度。我認爲它會解決它。

來源

2017-07-19 20:25:19

相關問題