保持不响应的图像水平居中

Question

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

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

我需要将 imgtop 始终设置为 1366px（不具有响应性），并在屏幕水平居中。

如果屏幕宽度小于 1366px，则应等比例剪裁 imgtop，使其两侧均隐藏，并保持中心位置。

目前，在较小的屏幕上，imgtop 只被右侧剪裁了。

需要帮助吗？

- user7461846

---

应该使用background-image而不是img标签，给定以下背景属性：background-size:1366px auto; background-position:top center; - ElusiveCoder

似乎这是最好的解决方案，请将其作为答案。 - user7461846

Answer 1

你可以通过一小段这样的 CSS 来实现它……然后你就搞定了。

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

- ElusiveCoder

Answer 2

保持居中对齐

以下代码将很好地工作。根据您的项目偏好进行调整。

.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>

- Electron

---

不，那是 Stack Exchange 的 CSS 做的，而不是上面的代码。如果你将我的代码复制到一个新文件并将其重命名为 something.htm，你会看到它按照你所描述的方式工作。 - Electron

我已经修改了代码，使其可以剪切中心并保持两边 :) - Electron

Answer 3

非响应式，但始终位于中心（无需中心标签）... 您可以将图像更改为任何其他图像 :)

        $(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://dev59.com/Ka7la4cB1Zd3GeqPisa-">Question</a>
    <br />
    <img src="https://www.akberiqbal.com/AkberIqbal.jpg">

- Akber Iqbal

---

感谢您的努力，但我期望得到一个 CSS 解决方案来解决这样一个琐碎的问题。 - user7461846