Question

当我删除＆＃34; border：1px solid black;＆＃34;时，图像不显示任何人都能想到这个吗？我试过但我不能！所以我真的希望有人能解决这个问题！

HTML：

<body>
    <header>
        <div class="container">

          <div class="main-width">

           <h1>logo</h1>
            <ul>
                <li><a>Your journey starts here.</a></li>
            </ul> 
            </div>
        </div>
    </header>
    <main>
        <section class="banner">
            <div id="home-image">
            <img src="images/image1.jpg" alt="home image"> 
        </div>     
        </section>
    </main>


</body>
</html>

CSS：

#home-image {
    border: 1px solid black;
    height:70vh;
    overflow:hidden;
}
#home-image img {
    width:100%;
    height: auto;
    margin-top:-35vh
}

这是一个包含完整源代码的fiddel：sample

Answer 1

您的示例适用于我，提供一些随机的谷歌图像。请参阅此fiddle。

<body>
    <header>
        <div class="container">

          <div class="main-width">

           <h1>logo</h1>
            <ul>
                <li><a>Your journey starts here.</a></li>
            </ul> 
            </div>
        </div>
    </header>
    <main>
        <section class="banner">
            <div id="home-image">
            <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="home image"> 
        </div>     
        </section>
    </main>
</body>

更新：为了说清楚，小提琴包含这个CSS：

#home-image {
    height:70vh;
    overflow:hidden;
}
#home-image img {
    width:100%;
    height: auto;
    margin-top:-35vh
}

确保图片的路径有效。

<强>第二。更新：问题是您使用的是overflow: hidden而没有为#home-image提供明确的宽度。

删除边框HTML CSS时图像不显示

1 个答案: