使无响应图像水平居中

Question

body{
    max-width:1366px;
    margin:0 auto;
    overflow-x:hidden;
}

.imgtop{
    display:block;
    width:1366px;
    margin:0 auto 5px auto;
}

我需要imgtop始终为1366像素（无响应），并在屏幕上水平居中。

如果屏幕宽度小于1366像素-imgtop应该在两边均等地切割（即隐藏），因此请保持中心位置。

当前-在较小的屏幕上，imgtop仅在右侧切割。

有帮助吗？

Answer 1

在保持中心位置的同时对齐中心

下面的代码将很好地工作。调整为您的项目首选项。

.myImage {
    height: 1000px;
    overflow: hidden;
    position: relative;
}
.myImage img {
    position: absolute;
    left: 50%;
    margin-left: -250px;
    width:500px;
    height:500px;
}

<div class="myImage"> <img src="https://i.imgur.com/PqKHozl.jpg" alt="Up" height="500" width="500"></div>

Answer 2

无响应，但始终位于中心（没有中心标签）...您可以将图像更改为您想要的任何其他图像：）

        $(document).ready(function () {
            nonResponsiveCenter();
            function nonResponsiveCenter(){
                var screenWidth = window.innerWidth;
                            var imgWidth = $('img').width();
                            if (imgWidth > screenWidth) {
                                var widthDiff = -(imgWidth - screenWidth) / 2;
                                $('img').css("margin-left", widthDiff);
                            }
                            else {
                                var widthDiff = (screenWidth - imgWidth) / 2;
                                $('img').css("margin-left", widthDiff);
                                $('img').css("margin-right", widthDiff);
                            }
            }

            $(window).resize(function () {
                nonResponsiveCenter();
            });
        });

    body {
        max-width: 1366px;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .imgtop {
        display: block;
        width: 1366px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://stackoverflow.com/questions/52585437/keeping-non-responsive-image-on-center-horizontally">Question</a>
    <br />
    <img src="https://www.akberiqbal.com/AkberIqbal.jpg">

Answer 3

您可以通过这样的少量CSS来完成它...而您已经准备好了...

background-size:1366px auto;
background-position:top center;