Question

我正在建立一个网站，当涉及到这个CSS的一些更精致的点时，我感到很茫然。解释起来很复杂，我改变的代码可能会影响网站的整个布局。

所以，我设置了dummy site，这是我正在看的内容的精确副本。

问题孩子是＆＃39;关于＆＃39;页。

这是大多数全尺寸电脑屏幕上的样子：

这是＆＃34;初稿＆＃34;我们正在努力。在另一个程序中创建，作为最终产品应该如何显示的地图。

理想情况下，我们需要这些看起来一样。整个墙（所有乙烯基刻字和奇怪的艺术，直到地板开始的地方）需要在大多数设备的黑暗内容区域上方可见。

让我感到困扰的是这张照片由CSS呈现的方式。 background-size:cover;属性让我适合。这是正在应用的风格。

background-image: url("images/testa333.jpg");
background-position: 50% -29.85px; \*(this is dynamic and changes as you scroll)\*

和

background-attachment: fixed;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
height: 100vh;
overflow: hidden;
position: relative;

我发现无法操纵它以使其看起来像我想要的方式而不影响页面的其他区域。我不确定答案是否在CSS中，如果我应该重新调整被应用为背景的图像，或者是什么。

除此之外，我还尝试更改图片的大小并将background-size: cover;更改为background-size:contain，但这也会影响页面下其他图片的布局。

如果您访问我提供的实际网站链接并通过浏览器控制台编辑了一些内容，您就可以更好地了解我所谈论的内容。

我很感激CSS大师提供的任何帮助。

如果其他地方有明显的答案，我道歉;我曾经常常处理服务器端的东西和基本的后端UI。

如果有人需要更多信息，请询问。

感谢。

Answer 1

您遇到了纵横比问题。让我试着说明发生了什么，以及解决这个问题的一些方法。

发生了什么

你有一张图片，为了参数，它是200x300。在你的模拟中，你准确地定位所有内容，使图像适合的点也是200x300。一切看起来都很完美，你可以看到整个图像，没有任何东西被裁剪。

当您尝试将图片添加到您的网站时，您会注意到您遇到的问题。您仍然拥有200x300的图像，但现在您正在尝试将其放入200x250的区域。这可能会导致一些事情。

您使用background-size：cover; - 整个容器已填充，但顶部和底部将根据您的背景位置值进行裁剪。这就是目前正在发生的事情。
您使用background-size：contains; - 未填充整个容器，但未裁剪任何内容。您将在图像的左侧和右侧看到容器的背景。

<强>解决方案

除了上面你可以做的两件事（显然不是你想要的），这些可能有助于你解决问题。

保持图像所在容器的纵横比。这是最简单的。如果您的图像是200x300，则宽高比为2：3。确保容器始终具有该纵横比，因此不会发生裁剪。只要宽高比与图像相同，它就可以是100x150,400x600等等。
使用您希望裁剪的照片。这是我一直建议的，但它需要一些远见来挑选看起来不错的图片。在这个例子中，我可以将图片进一步拉出或加宽它，这样你就可以有一个背景位置的小摆动空间：使用封面。这也适用于移动设备，因为屏幕尺寸发生变化，并且很难控制宽高比。
使用background-image：contains，但将边缘淡入背景，这样就无法判断图像是否填满了屏幕。这并不总是有效，看起来它不适用于你的例子，但是如果再遇到这种情况，请记住这一点很好。这为您提供了更多的空间来处理图像，如果正确编辑了原始图像，它可以看起来非常好。

希望其中一种解决方案适合您。老实说，最简单的方法就是让你的容器更高。继续增加容器的高度，直到裁剪边缘而不是顶部和底部。

我在使用CSS定位大背景图片时遇到问题。包含的代码/示例

1 个答案: