瀏覽器縮小時如何讓圖片和文字一起縮小？

Question

我正在為我們的群組應用程序制作用戶個人資料頁面，我想知道如何在縮小瀏覽器大小時縮小圖片大小和文本大小。

下面是類的 scss 代碼：

    .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;
  
    }

我試圖將它們分成行的 div，但大小不會縮小。 我還嘗試了自動寬度和高度，但那個尺寸會很奇怪。

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

為響應式網站使用媒體查詢斷點