无论屏幕尺寸如何，都能在网站上显示 100% 的图像背景

Question

我确定我的问题标题结构不当，但这就是我想要做的： Key: image = moving picture behind submit form

问题 1：无论页面宽度如何，都让背景图像保持完美尺寸。获取显示的运动图像的整个帧。当图像处于完美宽度 (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f) 时，它会显示整个图像。当宽度增加更多时，图像开始 'zoom in'。（我不想要。）

问题 2：在屏幕小得多的移动设备上，大部分图像被截断（您无法滚动查看其余部分）。获取显示的运动图像的整个帧。使整个图像居中，用户应该能够看到图像的整个框架。

这是我的图像代码：

  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
    height: 60%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: cover;

jsfiddle

Answer 1

#your_image_container_id {
     width: 100%;
}

你想说的是"Responsive Web Design"。为了实现 RWD，您从不使用像素、点等绝对单位，而是使用 %、em 等相对单位，这些单位会根据屏幕大小进行缩放。但是你已经做了一些计算，比如 %，确保同一行上的所有元素的总和百分比不超过 100%，或者类似的东西，并且还必须补偿填充和边距。

Answer 2

您需要执行以下操作：

#top{
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
    height: 60%;
    background-position: center -150px;
    background-repeat: no-repeat;
}

因为您使用的是 background-size: 100%;，所以您告诉浏览器为您缩放图像。通过删除它并定位背景，您将实现您想要的图像永远不会调整大小。

Fiddle

注意：您需要确保您的图像足够大，以便当页面被拉伸得非常大时您看不到背景。鉴于现在屏幕分辨率变得如此之大，这将很难做到。

无论屏幕尺寸如何，都能在网站上显示 100% 的图像背景

Get 100% of image background showing on website, no matter the screen size

html

css

image