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的类，该类会根据设备的屏幕比例自动调整图像！另外，您也可以尝试img-thumbnail类。

好吧，如果您不想使用它们。这是使图像具有响应性的好方法：

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

希望这会有所帮助。

Answer 2

您可以定义一定的屏幕宽度，该部分应显示得较小。

下面的示例在600px或更小的屏幕上将sec1类的高度设置为300px。

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

为什么我的网站图片没有响应

2 个答案: