(HTML) 图像中的文本(如果缩放到移动大小)(框架框架)

Question

我使用骨架框架制作我的第一个投资组合网站，

该网站在我的屏幕上看起来不错(1920 1080(，但是如果我尝试将其缩放到手机(Nexus 5x(，文本会自动进入图像

有人可以向我解释为什么文本进入图像吗？

这里有问题的屏幕截图： https://gyazo.com/8f7be918817a9c3580fcae51b72442b4

如果您想在线查看网站：

https://test.luukkenselaar.nl/

谢谢！

Answer 1

问题出在您的 html 布局上。不要使用<img>标记将图像设置为分割的背景。 相反，请尝试将图像设置为任何<div>的 css 背景，并使用媒体查询更改div的最小高度以使其响应。

例如：

.target-division {
background: url('../img/some_img.png');
background-repeat: no-repeat; 
min-height: 770px;
}

根据您的需要更改最小高度。 您也可以删除此代码：

.container {
margin-top: 30%;
}

这应该可以消除您当前的问题。