為什么我的網站圖片沒有響應

Question

我是編程新手，上個月才開始了解它，現在我正在為我的學校項目開發我的新網站，但我無法以某種方式使圖像響應。 我希望它在我更改屏幕尺寸時能夠響應，請有人幫助我，謝謝。 這是圖像的代碼：

 section.sec1{
        background: url(web.photos/pak2small.jpg);
        background-size: cover;
        background-attachment: fixed;
    }

這是頭部：

<!DOCTYPE html>
<html lang="en">
<head>
<title>2020 Web </title>
<meta charset="utf-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
    var zero =0;
    $(document).ready(function(){
        $(window).on('scroll', function(){
            $('.navbar').toggleClass('hide', $(window).scrollTop()
                > zero);
            zero = $(window).scrollTop();
        })

    })
</script>
</head>

這是 Html 的代碼：

   <div class="overlay">
       <h1>Welcome to Pak courses</h1>
   </div>
</section>

<section class="sec2">
    <h4>About our school</h4>
        <p>For a general overview of learning at Pakuranga College, please read the 2018 Prospectus. You can also find out what Nigel Latta thought about our school in his documentary entitled ‘School Report’.</p>

        <h4>our philosophy</h4>
        <p>Our college provides a very special learning environment. It is focused on developing outstanding citizens who are moral and respectful. We place an emphasis on ownership of learning and being actively involved so that our students are well equipped to succeed in the future.Students are encouraged to be interactive with teachers, technology and their peers to develop real understanding and, most importantly, to apply their knowledge to problem-solving. Rather than becoming repositories of knowledge, we expect students to find out, investigate and create solutions using the many resources around them.</p>

        <h4>rules & expectations</h4>
            <p>At Pakuranga College, we have high expectations for our students that relate to all aspects of school life. We believe that young people are more likely to succeed when they develop self-management skills and have the opportunity to show leadership in all of their endeavors.</p>

    </section>
<section class="sec3">
</section>

這是 Css 代碼：

section{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;


}
section.sec1{
    background: url(web.photos/pak2.jpg)no-repeat center;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 42%;
}

section.sec2{
    padding: 100px;
    height: auto;
}
section.sec2 h3{
    margin: 0;
    padding: 0;
    letter-spacing: 5px;
    color: #111;
}
section.sec2 p{
    font-size: 15px;
    color: rgb(99, 99, 99);
}
section.sec3{
    background: url(web.photos/pak3.jpg);
    background-size: cover;
    background-attachment: fixed;

Answer 1

最好使用 CSS 框架，如 Bootstrap、Bulma、PureCSS 等。這些具有非常有用的預定義類。

您只需將其添加到您的 html 即可開始使用它！

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

在這種情況下，Bootstrap3 有一個名為img-responsive的 class 可以根據設備屏幕比例自動調整圖像，此外，您也可以嘗試img-thumbnail class。

好吧，如果你不想使用它們。 這是使圖像響應的好方法：

myImage{
  display: block;
  height: auto;
  max-width: 100%;
}

希望這可以幫助。

Answer 2

您可以定義某個屏幕寬度，該部分應該看起來更小。

下面的示例在 600 像素或更小的屏幕上將 sec1 class 的高度設置為 300 像素。

@media screen and (max-width: 600px) {
  .sec1 {
    height: 300px;
  }
}

為什么我的網站圖片沒有響應

問題描述

2 個解決方案

解決方案1
0 2020-04-04 10:57:14

解決方案2
0 2020-04-04 21:51:44

為什么我的網站圖片沒有響應

問題描述

2 個解決方案

解決方案1 0 2020-04-04 10:57:14

解決方案2 0 2020-04-04 21:51:44

解決方案1
0 2020-04-04 10:57:14

解決方案2
0 2020-04-04 21:51:44