为了训练我的网络开发技能,我克隆了一些页面,但每次有一个巨大的图像,我无法使它完全响应,它看起来在手机上或当你减小屏幕尺寸时被破坏。今天我正在克隆这个页面:
正如你所看到的,这个网站是完全响应的,我的意思是如果我减少页面,无论如何它将是“好的”。特别是这对夫妇在山上的第一个大图像,甚至文字都响应!
这是我的代码:
<!-- Jquery qui fait que le header devient blanc quand on scroll -->
$(window).on("scroll", function() {
if($(window).scrollTop() > 10) {
$("header").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$("header").removeClass("active");
}
});
body {
margin: 0 auto;
}
header {
width: 100%;
height:40px;
background-color: transparent;
position: fixed;
}
.active { background-color: white;}
.all {
display: flex;
background-color: transparent;
}
.po {
padding: 0 50px 0 50px;
}
.pa {
padding: 0 50px 0 0px;
}
.pi {
padding: 0 50px 0 0;
}
.home {
width: 100%;
}
.hm {
width:100%;
margin-top: -200px;
max-width: 100%;
min-height: 1000px;
min-width: 1000px;
}
h2 {
position: absolute;
top: 200px;
width: 100%;
text-align: center;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
font-size: 40px;
padding: 10px;
}
<header>
<div class="all">
<div class="px"> 500px </div>
<div class="po"> Community </div>
<div class="pa"> MarketPlace </div>
<div class="pi"> Log in </div>
<div class="pu"> Sign Up </div>
</div>
</header>
<div class="home">
<img class="hm" src="http://wallpapercave.com/wp/R6ZWbAb.jpg" >
<h2><span> Home to everyone best photos </span></h2>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
但图像不像网站那样响应。如果我减少太多,文本和图像将
所以这是我的两个问题:他们是否使用Jquery / bootstrap / javascript来使他们的第一个大图像响应?如果是,你可以引导我去做一些tutotial或试着解释一下吗?如果他们没有这样做的话?
不需要jQuery或Javascript,在这种情况下,只需简单的CSS即可。我们将使用img
而不是使用div
元素,并将图像作为背景图像。
以下是应该替换你的img元素的html;
<div class="responsive_img">
</div>
这将是你的CSS;
.responsive_img{
width: 100%;
height: 800px;
background: url('http://wallpapercave.com/wp/R6ZWbAb.jpg');
background-size: cover;
background-position: center;
}
这是一个简化的JSFiddle,你可以做你想要的,这里有一个JSfiddle,你将如何将它实现到你当前的演示中。
使用您在问题中提到的任何语言都可能有这样的方法,但这可能是最简单的。