时间戳

首页 > 解决方案 > 为什么我的网站图片没有响应

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

问题描述

我是编程新手，上个月才开始了解它，现在我正在为我的学校项目开发我的新网站，但我无法以某种方式使图像响应。我希望它在我更改屏幕尺寸时能够响应，请有人帮助我，谢谢。这是图像的代码：

 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;

标签： jqueryhtmlcssiosbootstrap-4

解决方案

使用 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%;
}

希望这可以帮助。

推荐阅读