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

Question

我在使用引导程序时对标题图像进行样式设置时遇到一些问题，并且不确定在其他地方可以使用它。 图像始终居中，但是页面底部有左右滚动。 这很烦人，但这不是问题，因为它在移动设备上可以正常工作。 现在，有了一些最新更新，该网站无法正确显示在我的手机上（我想缓存会清除），这是一个问题。 我已经确定了导致此问题的原因，但是我对CSS的了解还不足以通过引导程序和移动设备来纠正它。 该网站是SamsSocial.com，以查看其实时示例，这可能使调试更加容易。 可以给予的任何帮助将不胜感激。 谢谢

<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%;
}

Answer 1

尝试使用“最大宽度”或“最小宽度”，以使该图片具有响应性。 您可以定义宽度：100％，然后定义最大宽度和最小宽度。 我认为它将解决此问题。

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

问题描述

1 个解决方案

解决方案1
0 2017-07-19 20:25:19

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

问题描述

1 个解决方案

解决方案1 0 2017-07-19 20:25:19

解决方案1
0 2017-07-19 20:25:19