Я работаю над небольшим проектом, и я только что закончил базовый макет первого раздела.Я также хочу сделать страницу телефона доступной с @media правилами.Но сейчас я спрашиваю вас, ребята, как правильно работать с изображениями на веб-странице, когда размер браузера изменяется следующим образом.
Отсюда: 
Для этого (изменен (меньше)): 
Это выглядит просто плохо.Можно ли сделать так, чтобы оно не меняло размеры и просто исчезало (вроде переполнения: скрыто).если так, как бы я это сделал?Какие способы вы бы порекомендовали как профессионалы?
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v14/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* colors */
.col-grey {
background-color: #E0E0E0;
}
/* header section */
html {
font-family: "Lato", sans-serif;
}
.bold {
font-weight: 900;
}
header {
height: 4rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
padding-left: 24px;
align-items: center;
height: 2rem;
}
.logo i {
padding-left: 1.5rem;
padding-right: 5px;
}
.navigation span {
padding: 0 1rem;
}
.navigation {
padding-right: 24px
}
/* main-section */
.learn-more-container {
display: flex;
background-color: #f2f2f2;
padding: 2rem 1.5rem;
}
.learn-more-container img {
padding-right: 1.5rem;
width: 60%;
height: auto;
}
.learn-more {
display: flex;
flex-direction: column;
justify-content: center;
color: #4A4A4A;
padding-left: 50px;
}
.learn-more h1 {
font-size: 60px;
font-family: sans-serif;
font-weight: 700;
padding-bottom: 40px;
}
.learn-more p {
font-weight: 500;
font-size: 30px;
padding-bottom: 40px;
}
.btn-start-here {}
.btn:focus {
outline:none !important;
}
.btn {
padding: 8px 0;
font-size: 20px;
font-weight: 500;
color: white;
background-color: #595959;
border-radius: 2px;
border: 0;
}
.btn-start-here:hover {
box-shadow: 5px 8px 15px grey;
background-color: black;
}
.btn-start-here:active {
background-color: lightgrey;
border: 1px solid black;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Comar Academy | Home</title>
<link rel="stylesheet" href="./resources/css/reset.css">
<link rel="stylesheet" href="./resources/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>
<body>
<!-- header section -->
<header>
<div class="logo">
<!-- <img src="#" alt="A picture our logo"> -->
<i class="fa fa-globe fa-2x"></i>
<h1><span class="bold">COLMAR</span>ACADEMY</h1>
</div>
<div class="navigation">
<span>On campus</span>
<span>Online</span>
<span>For companies</span>
<span>Sign in</span>
</div>
</header>
<!-- Main-content -->
<div class="learn-more-container col-grey">
<img src="./resources/images/banner.jpg" alt="A picture of people sitting on a table studying">
<div class="learn-more">
<h1>Learn something <br> new Everyday</h1>
<p>Lorem ipsum dolor sit amet,<br>consectetur adipiscining elit.</p>
<button type="button" name="Start here" class="btn-start-here btn">Start here</button>
</div>
</div>
</body>
</html>
В строке 28 изображена картинка. Большое спасибо за каждую помощь: D.