javascript - 全宽/拉伸(stretch)网站背景图片

Question

This question already has an answer here:

Full Width Background with Fixed Width Content (CSS)
                                
                                    （1个答案）
                                
                        
                                2年前关闭。
            
                    
如何获得网站背景图片为全角/拉伸，侧面和顶部没有空间。我不知道它是HTML，CSS还是JavaScript，我必须使用它来完成此操作。

click here for an example of what i would like

这是我的CSS代码：

section{
    
    max-width:100%;
	height:700px;
	background-size:cover;
    background-position:50% 50%;
    background-repeat: no-repeat;
  }

最佳答案

有很多不同的方法可以做到这一点，实际上这完全取决于开发人员。

此代码可能会对您有所帮助。

section {
  position: absolute;
  top: 0,
  left:0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background: #0e0e0e;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 50%;
  object-fit: contain;
}

<section><img src="/image/A2e0s.png" /></section>

关于javascript - 全宽/拉伸(stretch)网站背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53290204/

上一篇：html - 表格边框底部的间距

下一篇：迭代之间的 CSS 动画延迟

Answer 1

有很多不同的方法可以做到这一点，实际上这完全取决于开发人员。

此代码可能会对您有所帮助。

section {
  position: absolute;
  top: 0,
  left:0;
  bottom: 0;
  right: 0;
  height: 100%;
  background-repeat: no-repeat;
  background: #0e0e0e;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 50%;
  object-fit: contain;
}

<section><img src="/image/A2e0s.png" /></section>