Html 如何将背景设置为50%的网页？

我想将背景设置为50%的页面（宽度）和100%的高度，但我收到了一半的图片，而不是整个图片

我想得到整个画面，但画面将显示在屏幕的一半。有什么建议吗？ CSS:

---

jsiddle:

将图像包装在父容器中，并具有固定的高度/宽度

您的标记可以是

.parent{
宽度：100px；
高度：100px；
}
chilgImg先生{
宽度：50%；
身高：50%；
}

---

在样式标签或外部css文件中将图像宽度设置为50%

.image-class{ width: 50%;}

---

只需使用

contain

而不是

cover

，它就会按照tin上的说明进行操作。另外，我添加了

背景重复

，这样您就不会得到重复。您可以使用

背景位置：50%50%将图像居中

cover
将尝试拉伸图像以按比例填充整个空间<代码>包含

将按比例在可用空间中匹配图像。任何其他尺寸都可以由您定义-您可以使用

100%自动

始终按100%比例填充宽度，等等

请在此阅读：

html，正文{
身高：100%；
}
#背景{
宽度：50%；
身高：100%；
背景图像：url（“https://wallpaperscraft.com/image/mountain_lake_landscape_trees_79396_2560x1600.jpg");
背景尺寸：包含；
背景重复：无重复；
}

---

我将您的页面分为两个部分，其中

#background

是一个位于页面内容后面的视口填充元素。因此，现在背景图像在CSS中不是作为背景图像显示的，而是通过HTML中的

标记呈现出来的

看小提琴：

使用相对定位和

z-index

属性进行此操作非常重要。否则，如果我理解正确的话，它应该适合你的需要

---

编辑：如果要保持全高，应将

#background.bg image img

的宽度设置更改为

auto

请发布使用的代码<代码>背景大小：50%100%应该可以，但我看不出您当时是如何做到这一点的。您还需要将

html、body

都设置为

height:100%

——我不知道您是否这样做了。发布你的代码，那是行不通的。我希望所有的图像都能显示出来，但是只有屏幕的一半@somethinghere没有代码，我无法知道您尝试或正在尝试完成什么。什么是“屏幕的一半”？半幅完整图像还是半幅完整图像？我添加了一个JSFIDLE。如您所见，背景是屏幕的一半，但图像也被剪切了一半。我想让它显示整个图像@somethinghere，首先，

img

标记self-close，所以它是

，而不是

。其次，您的

溢出

可能必须隐藏，否则这没有什么区别。对于图像标签，很抱歉，您忘记了这一点。有时只使用IDE的自动完成是一个坏习惯。如您所见，背景是屏幕的一半，但图像也被剪切了一半。我想显示整个图像这里是你的一个更新的小提琴，你的父元素有固定的宽度/高度。谢谢，但现在的高度不是100%，我希望图像将在全高，但一半的宽度。是的，我更新了。上帝知道你为什么要这么做，因为这会破坏你的形象。如果你现在说这是不相称的，那么你就没有答案了。不能显示整个图像，不能保留比例并填充整个随机大小的区域

.image-class{ width: 50%;}