在小屏幕中查看网站时图像被截断

Question

我有一个问题，当高度或宽度减小时，我的图像会被截断。 我需要让它响应，所以我没有帮助。

我曾尝试使用媒体查询，但它仍然无法正常工作。

代码 - Github
示例网站 - GitHub 页面

谢谢。

Answer 1

这是因为您已经为图像定义了height 、 width和object-fit: cover 。 您的高度和宽度都是 window 大小的百分比，因此它们并不总是与图像的纵横比匹配。 object-fit: cover表示如果图片的高和宽与图片的纵横比不匹配，会缩放到两者中较大的一个，并剪掉图片中不适合的两端。

为了防止图像被截断，您需要

• 消除object-fit: cover ，或
• 消除height或width变量（以便自动确定另一个）

Answer 2

看来问题是由于图像的高度和宽度的纵横比不一致。 在鼠标和 gruffalo 的情况下，宽度和高度都设置为显示分辨率的百分比。 与图像的纵横比相比，显示器的纵横比通常是不同的。 要解决此问题，应将属性之一（宽度或高度）设置为自动，以考虑图像的纵横比。

鼠标和咕噜牛的问题可以这样解决。

 section #mouse { top: 38%; left: 10%; height: 30%; width: auto; z-index: 10; } section #gruffalo { top: 41%; left: 75%; height: 30%; width: auto; }

下面的代码通过保持纵横比修复了图像被切断的问题。

我希望这个回复有所帮助。

此致，

Answer 3

我认为这个ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ的问题：

section #mouse {
    top: 38%;
    left: 10%;
    height: 30%;
    width: 15%;
    z-index: 10;
}

当您设置宽度 15% 时，图像将在宽度减小时被剪切。 高度的相同原因......使用高度或宽度的百分比将使其减少。

我认为你可以使用object-fit: contain; 和object-position: center; 在此图像中 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 并将width或height之一转换为max-width或max-height 。 #gruffalo 也是如此