浏览器缩小时如何让图片和文字一起缩小？

Question

I am making a user profile page for our group app, I want to know that how I can make the size of the picture and the size of the text shrink when I shrink the size of the browser.

below are the scss code for classes:

    .show-picture{
        width: 200px;
        height: 150px;
        border-radius: 10%;
        size-adjust:relative;
    }

    .Trip_info{
        width: 20%;
        height: 200px;
        float:left;
    }

    .Planner_page{
        width: 20%;
        height: 200px;
        margin-left:40%;

    }

    .Social{
        width: 20%;
        height: 200px;
        float: left;
    }

    .Setting{
        width: 20%;
        height: 200px;
        margin-left:40%;
    }


    .button{
        font-size: 2em;
        letter-spacing: 0px;
        margin-bottom: 30px;
        margin: 4px 2px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        color: grey;
  
    }

I tried to divided them into div of rows but the size will not shrink. And also I tried the width and height auto but that size will be very werid.

Answer 1

 body{ margin: 0; padding: 0; background-color: grey; text-align: center; } p{ color: blue; font-size: 40px; } img{ width: 300px; height: 300px; } /* media query breakpoints */ @media screen and (max-width: 480px){ body{ background-color: lightblue; } p{ color: red; font-size: 20px; } img{ width: 150px; height: 150px; } }

 <p>Dummy Text</p> <img src="http://docllpdemo.com/asteroid/wp-content/uploads/2020/11/dummy-man.png" alt="dummy-man">

Answer 2

use media query breakpoints for a responsive website