如何使背景图像更宽？答案

【问题标题】：How to make background image wider?如何使背景图像更宽？
【发布时间】：2021-06-14 23:54:29
【问题描述】：

如果问题不太好，我很抱歉，但我真的需要帮助。

当我调整窗口大小时，图像也会调整大小。我要那个。问题是当它调整得太小时，底部的滚动条会出现，当我向右滚动时，我的图像不合适。我需要帮助将图像放在正确的位置。我不想使用任何

overflow: hidden;

在 CSS 中。

<html><head>
            <meta charset="UTF-8">
            <title>Hello World</title>
            <link rel="stylesheet" href="indexstyle.css">
            <meta name="google-site-verification" content="hJmWezR-BdO4eF-2HJqeRyPJr01jx1XAucxbiir7eM0">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
        <body>
            <div class="wrap">
                <div class="extra">
                <header>
                <a href="index.html">
                <img src="img/logo.jpg" alt="Hello World" title="Hello World - My first Website.">
                </a>
                </header>
                </div>
                <section>
                <nav>
                    <div class="nav">
                <table cellspacing="5" cellpadding="5">
                <tbody><tr>
                    <td><button class="index"><a href="index.html">Home</a></button></td>
                    <td><button class="article"><a href="Articles.html">Articles</a></button></td>
                    <td><button class="about"><a href="About.html">About</a></button></td>
                    <td><button class="contact"><a href="ContactUs.html">Contact Us</a></button></td>
                    <td><button class="fgame"><a href="fall-game-master/Fallgame.html">Fall Game</a></button></td>
                    <td><button class="jgame"><a href="easiest-game-ever-master/easygame.html">Jump Game</a></button></td>
                    <td><button class="meme"><a href="meme.html">Among us Memes</a></button></td>
                </tr>
                </tbody></table>
                </div>
                </nav>
                </section>
                </div>
                <hr>
                <div class="para">
        <h1>Hello World</h1>
        <p>This is my first webpage. <br>I hope you like it.</p>
        <hr>
        <p>Another paragraph.</p>
<ul>
<li>I made this sentance.</li>
<li>And this one.</li>
<li>Don't forget this one.</li>
<li>Tell me, who do you think made this sentence?</li>
<li>I used HTML coding for this.</li>
</ul>
<p><strong>I made this bold.<strong></strong></strong></p><p><strong><strong>
</strong></strong></p></div><strong><strong>

        <img src="img/smile.bmp" height="10%">
        <br>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<h2>Welcome to Hello World.</h2>
    <hr>
<footer>
<a href="https://www.jw.org/en/"><img src="img/jw.jpg" title="Go to JW.ORG"></a><br>
<hr>
Copyright © HelloWorld 2021-2021
</footer>
    
</strong></strong></body></html>

这是我的html。

这是我的 CSS 和网页外观。

这是一张更好的手机网页图片。

【问题讨论】：

请不要使用屏幕截图在您的问题中添加 css/ 代码。使用代码格式或堆栈 sn-ps 将 css 复制到问题中。屏幕截图很难阅读！
您是否考虑过使用repeat-x 或object-fit？最好修复您的导航以修复您的导航以响应，但同样值得尝试......这都是学习！
好的。你怎么能这样做？
在 SO 网站（以及其他资源也是如此！）上有许多与响应性有关的问题。我相信您可以在 stackoverflow 上找到一些问题来解决您的问题
我看了看，没有人认为他们的桌子比背景图片长

标签： html css image width

【解决方案1】：

问题不是背景图片不够宽，而是你的导航太宽，比屏幕宽度宽，导致水平滚动条。您需要使您的导航和 iframe 响应。我将首先从<table> 中删除您的导航（这不是表格元素的用途）。这里有一些非常基本的 html 和 css 可以让你开始响应式地设计那些麻烦的元素。然后，您需要重新处理背景图像，使其看起来像您想要的样子，也许可以通过将导航放入其中。

HTML：

<nav>
    <ul class="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="Articles.html">Articles</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="ContactUs.html">Contact Us</a></li>
        <li><a href="fall-game-master/Fallgame.html">Fall Game</a></li>
        <li><a href="easiest-game-ever-master/easygame.html">Jump Game</a></li>
        <li><a href="meme.html">Among us Memes</a></li>
    </ul>
</nav>

CSS：


iframe {
    height: 400px;
    width: 100%;
    max-width: 560px;
    margin: auto;
}

.nav {
    flex-direction: column;
    list-style: none;
}

.nav a {
    /* Make whatever color you want */
    color: red;
}

@media(min-width: 650px) {

    .nav {
        flex-direction: row;
    }
}

请注意，导航链接在小屏幕上堆叠在一起。您需要一个按钮和一些 JavaScript 来“打开”和“关闭”导航。

【讨论】：

好的。那你会怎么解决呢？
我无法为您编写整个页面，但我用一些代码更新了我的答案以帮助您入门，现在应该解决水平滚动条。当页面调整大小时，iframe 的纵横比会稍微失真。我可能会回来为您更新。