html - 缩放英雄图像

我在这里浏览了很多帖子，其中有些比其他帖子与我的问题关系更密切。但是我仍然要找到解决方案/解释。 -对不起，如果我错过了答案！

开始。

关于我正在创建的网站上的英雄形象，我遇到了这个问题，在继续尝试之前，我希望看到它得到解决。

我的问题是，当前缩放时，它朝左上角移动，并在底部添加水平滚动条。

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

希望有一个简单的修复程序，或者我显然缺少的东西，您可以为我虚弱的头脑提供一个关于我没有得到的确切解释。

下面提供了到目前为止的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>

最佳答案

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>

关于html - 缩放英雄图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51637288/