Question

我确定我的问题标题很糟糕，但这就是我要做的事情： 键：图片=提交表单后面的动态图片

问题1：无论页面的宽度如何，都要使背景图像保持完美的大小。获取运动图像的整个帧显示。当图像处于完美宽度（http://gyazo.com/702e443a6b814b1abc26a801836f4d6f）时，它会显示整个图像。当宽度增加得更多时，图像开始放大＆＃39;。（我不想要的。）

问题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

您需要执行以下操作：

#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

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

Answer 2

#your_image_container_id {
     width: 100%;
}

您想说的是“响应式网页设计”。为了实现RWD，您永远不会使用像素，点等绝对单位...而是使用%，em等相对单位，根据屏幕大小进行缩放。但你已经做了一些计算，比如%，确保同一行上的所有元素都没有百分比超过100％的总数，或类似的东西，还必须补偿填充和边距。 / p>

无论屏幕大小如何，都可以在网站上显示100％的图像背景

2 个答案: