当我缩小浏览器时，我应该如何修改我的 css 以使图像更接近我的文本？
Posted
技术标签:
【中文标题】当我缩小浏览器时，我应该如何修改我的 css 以使图像更接近我的文本？【英文标题】：How should I modify my css to make the image getting closer to my text when I narrow the browser? 【发布时间】：2019-12-21 12:04:26 【问题描述】：伙计们，我是前端开发的新手，我正在尝试从构建页面中学习。
这里是演示。
https://codesandbox.io/s/goofy-boyd-xscgd
它在全屏上看起来不错，但是当我缩小视口时。图片似乎离文字越来越远，而且它们之间的差距也越来越大，如图所示。
我想要达到的效果是，当我缩小浏览器时，图片会更接近文本（并且它们之间会有重叠）。在手机上查看时，图片将成为屏幕的背景图片。像这样
有人可以帮我解决这个问题吗？
【问题讨论】：
只是一个建议_但它可能有助于获得正确的建议_将React标签添加到您的任务中
@inputforcolor 谢谢！
【参考方案1】：
设置图片元素为
position: absolute;
right: 0;
在 CSS 文件中。应该可以的。
【讨论】：
他们不应该也调整z-index吗？ 是的，对不起。这将有助于把它放在后面。【参考方案2】：好吧，您可以使用 CSS 媒体查询来做到这一点。这是一个示例，我希望您可以调整并使其适合您。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="main">
<div id="txt">
<h1>Your Text</h1>
</div>
<div id="pic">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/500"></a>
</div>
</div>
</body>
</html>
CSS
#main
width:100%;
#txt
width:50%;
display: inline-block;
#pic
width:48%;
display: inline-block;
@media (max-width: 500px)
#pic
display: none;
#main
background: url("https://via.placeholder.com/500");
background-size: cover;
#txt
width:100%;
text-align: center;
将浏览器的大小缩小到小于 500 像素并刷新，您会看到变化。如果您想以更动态的方式执行此操作，则必须使用 javascript/jquery。
【讨论】：
以上是关于当我缩小浏览器时，我应该如何修改我的 css 以使图像更接近我的文本？的主要内容，如果未能解决你的问题，请参考以下文章