html - 全宽响应式网站正文图片

标签 html css responsive-design

我卡在某事上了。 我需要创建一个具有全宽背景图像的单页网站,但在网站中打开时图像会在每一边被剪切。

该网站的实时地址为 here

目前我正在使用后伸。但是我尝试过使用 100% 和自定义 CSS,然后效果相同或更差。甚至使用封面作为背景大小。

有什么方法可以解决此问题,以便图像在移动设备上正确打开吗?

最佳答案

使用 CSS background-image 属性代替实际的 img

body{
  background:url(bg.jpg) no-repeat;
  background-size:cover !important;
}

您还会发现使用背景而不是 img

操作其他页面元素要容易得多

关于html - 全宽响应式网站正文图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21222391/

相关文章:

html - Twitter Bootstrap 破坏了 div 的内容,里面有几个元素

html - 溢出 : hidden breaks border-radius

html - CSS-Selector 单规则

javascript - 根据 JavaScript 计算输出过滤表行

javascript - 可以读取 iframe 的标题吗?

css - 在不破坏设计的情况下将 CSS 文件的一部分输入到另一个文件中

jquery - Bootstrap Modal 是透明的 - 不透明度不起作用

html - 背景对 Bootstrap 没有响应

javascript - 响应式 Sprite 表动画不能很好地缩放

html - 使用 Groovy/Grails 以编程方式使用 html 模板