【问题标题】:HTML: How to make an image NOT have influence on the width of whole site?HTML:如何使图像不影响整个站点的宽度?
【发布时间】:2016-11-12 13:21:48
【问题描述】:

我从中心左右有 2 个图像,它们放置得很好,但是当屏幕尺寸

图片的CSS(简单的放在body中):

#fans_l {
 position: absolute;
 text-align: left;
 margin-left: -955px;
 margin-top: -228px;
 z-index:3;
}

#fans_r {
 position: absolute;
 text-align: left;
 margin-left: 399px;
 margin-top: -228px;
 z-index:3;
}

正文 css:

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  background-image:url(p/back.jpg);
  background-repeat: repeat; text-align: center;
}

【问题讨论】:

  • 请添加一个带有html的cde示例,最好包括一个实时工作示例,例如jsfiddle / codepen / plunkr
  • overflow-x:hidden

标签: html css image width border


【解决方案1】:

在这种情况下,您可以做一些事情。想到的前两个如下:

  1. 您可以在主体 css 中声明 overflow-x 属性设置为 none 或 hidden,从而有效地切断多余的像素。但是,在固定的图像尺寸下,这在较小的浏览器上可能并不理想。请记住,许多人的显示器小于 1920 像素。

  2. 您可以使用 CSS3 中的一个漂亮的小工具,称为媒体查询。使用它们,您可以根据监视器的宽度或高度更改 css 规则。使用这种方法,您可以确保它在所有大小的浏览器窗口中都显示为完整。

【讨论】:

  • 很高兴能为您提供帮助!
猜你喜欢
  • 1970-01-01
  • 2019-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-24
  • 2016-03-21
  • 2015-11-19
  • 1970-01-01
相关资源
最近更新 更多