Html 如何以较小的宽度和高度显示整个图片

我想显示一张带有

背景图像的图片：url（“mypic.png”）

Html:



例如，我有686x350图像。我希望不管怎样，它都会显示在
#example1
的背景上，这样即使我调整了浏览器的大小，也能看到完整的图像。有什么建议吗？
要缩放背景图像以适合div内部，请执行以下操作：

#example1{
      background-size: contain;
}

要缩放背景图像以覆盖整个div，请执行以下操作：

#example1{
      background-size: cover;
}

请参见
听起来您需要
背景尺寸：封面
属性：

#example1 {
    background-size: cover;
}

这将缩放图像以覆盖其所在的整个元素，而不考虑屏幕大小/分辨率。
在JSFIDLE中添加html和css，以便任何人都可以轻松找到问题。
#div{background:url（mypic.png）；background size:686px 350px；background repeat:no repeat；}
#example1 {
    background-size: cover;
}