Question

当我在自己的业余网站上创建英雄图像部分时，该部分会拉伸视口的100％宽度。我上传的每张图片都会放大。就像您看不到整个图片的一部分一样。

我知道我可以使用背景重复，大小和封面来演示我希望如何呈现图像。但是，有没有一种方法可以让我显示图像而无需浏览器裁剪掉图像的大部分？

即使我调整图像大小也似乎也不起作用，因为宽度始终是视口的100％。

好奇的是，是否有人找到一种解决方案来应对图像占据100％视口宽度的“放大”效果。

Answer 1

如果不使用Cover background属性，请至少尝试将高度设置为100％，分别为in here和its fiddle。

body {
    background-image:url("http://i.imgur.com/aZO5Kolb.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}

这应该拉伸视口中的所有图像。

Answer 2

与图像尺寸/比率相比，您无法控制用户视口的高度或宽高比，因此，在使用background-size: cover时，总是有可能从宽度或高度上被裁剪掉。

为了保持图像的长宽比并覆盖图像的元素，可以在图像的“焦点”上使用background-position。例如，如果图片的主要部分在图片的右下角附近，则可以设置background-position: 90% 90%。这样，覆盖物就必须裁剪，至少会尝试移动图像，以使主要被摄对象始终居中对齐。

这是一个例子：

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  background: url(http://placekitten.com/1000/700) no-repeat;
  background-size: cover;
  background-position: 50% 0;
}

如何减轻覆盖100％网页宽度的英雄图像的“放大效果”？

2 个答案: