缩放时将英雄图像居中

Question

我在这里浏览了很多帖子，其中一些帖子比其他帖子更接近我的问题；但我仍然要找到 solution/explanation。 -- 抱歉，如果我在某处遗漏了答案！

开始了。

我有一个关于我正在创建的网站上的英雄形象的问题，我希望在我进一步冒险之前看到这个问题得到解决。

我的问题是，目前在缩放时，它会向左上角移动，并在底部添加一个水平滚动条。

理想情况下，当我使用浏览器放大时，我希望主图居中，并且没有水平滚动条。

希望有一个简单的修复方法，或者一些明显的我遗漏的东西，你们可以为我脆弱的头脑提供一个解释，说明我到底没有得到什么。

下面提供了我目前拥有的 HTML 和 CSS。 - 提前致谢！

* {
    margin: 0;
    padding: 0;
    font-size: 10px;
    
}

.hero_Image {
    height: 1080px;
    width: 1920px;
    background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-bottom: 1px solid lightgray;

    margin: 0 auto;
    position: relative;
    box-sizing: border-box
    
}

.preview {
    height: 50rem;
    width: 1920px;
    margin-left: 10%;
    background: green;
    margin: 0 auto;
}

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>treadwell.io</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <section class="hero_Image">

        </section>
        <section class="preview">
            
        </section>
    </body>
</html>

Answer 1

to fix your problem add this css to your file and your problem is that you let the width of sections overflowing

  .hero_Image {
   height: 500px;
   width: 500px;
   background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size:cover;
   border-bottom: 1px solid lightgray;
   position: relative;
   box-sizing: border-box;
   overflow: hidden;
   margin: 0 auto;
  }  

  .preview {
   height: 500px;
   width: 500px;
   margin-left: 10%;
   background: green;
   margin: 0 auto;
   overflow:hidden;
  }

<!doctype html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>treadwell.io</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <style>
 </style>
    <body>
        <section class="hero_Image">

        </section>
        <section class="preview">
            
        </section>
    </body>
</html>

缩放时将英雄图像居中

Centering hero image on zoom

html

css

google-chrome

zooming