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

CSS中心图像影响屏幕宽度，移动视图

回答

相关问题