Question

我正在尝试创建一个覆盖整个视口的前景图像（不是背景）。当页面调整大小或在较小的设备上查看时，我希望图像中最重要的部分与任何不适合窗口宽度（不是其高度）的窗口中的部分居中。为了澄清，我们假设这表示10位像素宽图像中的水平像素，我想将其置于像素＃7的中心。

| 0123456789 |

在更宽的屏幕上显示的

可能是：
| 0 1 2 3 4 5 6 7 8 9 | （仍然包含整个屏幕）

为较小的屏幕调整大小：

| 123456789 |
| 23456789 | ＆lt; - 更小的屏幕
| 3456789 | ＆lt; - 更小的屏幕
| 456789 | ＆lt; - 更小的屏幕
| 45678 | ＆lt; - 更小的屏幕
| 5678 | ＆lt; - 更小的屏幕
| 678 | ＆lt; - 更小的屏幕
| 67 | ＆lt; - 更小的屏幕
| 7 | ＆lt; - 更小的屏幕

在此示例中，整个图片显示屏幕足够大以显示整个图片。但是当屏幕缩小时，它应该正确裁剪（主要是从左侧），以确保＃7始终以朝向屏幕中心的比例运动显示。我怎样才能做到这一点？ CSS，javascript和JQuery必须能够处理这个问题。

Answer 1

编辑，因为它是前景：这里的想法是使用line-height, text-align , min-height, min-width和否定margin来裁剪图片：以下片段中的平均结果或codepen

html {
  height:100%;
}
body {
  text-align:right;
  line-height:100vh;
  height:100%;
}

img {
  min-width:100%;
  min-height:100%;
  margin:-50% 0 -50% -240%  ;
  vertical-align:middle;
}

<img src="http://dummyimage.com/600x200&text=123456789" />

来自我的评论：

html {
  min-height: 100%;
  background: url(http://dummyimage.com/600x200&text=123456789) 73% center no-repeat;
  background-size: cover;
}

这个想法是，一旦页面调整大小，最后看到的数字是7.

您需要在整页中运行代码段或使用之前喜欢的codepen：http://codepen.io/gc-nomade/pen/jqjdrp

Answer 2

认为你只是在寻找背景位置：中心？

＆＃13;

/*.with-bg-size*/ html {
  background-image: url('http://placehold.it/1600x1600');
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

＆＃13;

<div class="with-bg-size"></div>

＆＃13;

Answer 3

保持图像的宽高比以便于响应

div:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: (16 / 9) * 100%;
  }

CSS响应图像定位和裁剪

3 个答案: