why isn't my image for my website responsive
Question
I'm new to programming just started to learn about it last month and right now I am working on my new website for my school project and I can't make the image responsive somehow. I want it to be responsive when I change the screen size, please can someone help me, thank you. Here is the code for the image:
section.sec1{
background: url(web.photos/pak2small.jpg);
background-size: cover;
background-attachment: fixed;
}
Here's the head:
<!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>
here's the code for 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>
Here's the Css code:
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;
2 answers
solution1
0 2020-04-04 10:57:14
It's good to use CSS frameworks like Bootstrap, Bulma, PureCSS, etc. These have predefined classes that are quite helpful.
You can simply add this to your html to start using it!
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
In this case, Bootstrap3 has a class called img-responsive that automatically adjusts image as per device screen ratio, Also, you can try out the img-thumbnail class too.
Well, if you don't want to use them. Here's a good way to make your images responsive:
myImage{
display: block;
height: auto;
max-width: 100%;
}
Hope this helps.
solution2
0 2020-04-04 21:51:44
You can define a certain screen width the section should appear smaller.
The example below sets the height to 300px on the sec1 class on screens that are 600px or less.
@media screen and (max-width: 600px) {
.sec1 {
height: 300px;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.