Ребята, я новичок в разработке внешнего интерфейса и пытаюсь научиться создавать страницы.
Вот демо.
https://codesandbox.io/s/goofy-boyd-xscgd
Это выглядит хорошо на полном экране, но когда я сужаю область просмотра. Кажется, что картинка удаляется от текста, и разрыв между ними увеличивается, как показано на рисунке. 
Эффект, которого я хотел достичь, состоит в том, что когда я сужаю браузер, изображение становится ближе к тексту (и между ними будет перекрытие). При просмотре на телефоне изображение становится фоновым изображением экрана. как это
Может кто-нибудь помочь мне с этим?
2 ответа
Установите элемент изображения в
position: absolute;
right: 0;
В файле CSS. Это должно работать.
Ну, вы можете сделать это с помощью медиа-запроса CSS. Вот пример, я надеюсь, что вы можете настроить и заставить его работать на вас.
HTML
<!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.