如何创建完全响应的图像(不只是宽度:100%和高度:自动)

问题描述 投票:4回答:1

为了训练我的网络开发技能,我克隆了一些页面,但每次有一个巨大的图像,我无法使它完全响应,它看起来在手机上或当你减小屏幕尺寸时被破坏。今天我正在克隆这个页面:

https://500px.com/

正如你所看到的,这个网站是完全响应的,我的意思是如果我减少页面,无论如何它将是“好的”。特别是这对夫妇在山上的第一个大图像,甚至文字都响应!

这是我的代码:

<!-- 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>

Fiddle

但图像不像网站那样响应。如果我减少太多,文本和图像将

所以这是我的两个问题:他们是否使用Jquery / bootstrap / javascript来使他们的第一个大图像响应?如果是,你可以引导我去做一些tutotial或试着解释一下吗?如果他们没有这样做的话?

javascript jquery html css
1个回答
8
投票

不需要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,你将如何将它实现到你当前的演示中。

使用您在问题中提到的任何语言都可能有这样的方法,但这可能是最简单的。

© www.soinside.com 2019 - 2024. All rights reserved.