javascript - 如何创建完全响应图像(不仅仅是宽度 :100% and height: auto)

Question

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

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 使他们的第一个大图像响应？如果是的话，你能带我去一些教程或试着解释一下吗？如果没有，他们是怎么做到的？

Answer 1

不需要 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您将如何在当前的演示中实现这一点。

对于您在问题中提到的任何语言，可能有多种方法可以做到这一点，但这可能是最简单的。