html - 显示两种尺寸的图片

Question

我正在尝试将一张图片作为背景图片。问题是图像显示了两次，一次是原始尺寸，然后是更大的尺寸，填满了页面的整个宽度。我不确定为什么他们都出现了。我已将图像设置为不重复。当我更改值(例如高度 335 像素到 900 像素)时，以较大尺寸显示的图像会调整大小，但原始尺寸图像继续显示在我刚才提到的图像顶部，在此处输入代码 会调整大小。我怎样才能让原始尺寸的图像不显示出来。这是我的 CSS:

#banner-contact{
    width: 100%;
    height:100px;
    background-image:url('resized-images-logo/contact-page-resized.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    margin:0px;
} 

with the following html:

    <div id="banner-contact">
        <img src="resized-images-logo/contact-page-resized.jpg">
    </div>

Answer 1

img html 元素和 background-image css 样式都会生成显示的图像。您应该能够从 html 中删除 img 元素，div 的 css 样式将显示您的封面图片。