[英]How to create a fully responsive image (not just width:100% and height: auto)
to train my web dev skills, I clone some pages, but everytime there is a huge image, I can't make it fully responsive, it look destroyed on phone or when you reduce the screen size. 为了训练我的网络开发技能,我克隆了一些页面,但每次有一个巨大的图像,我无法使它完全响应,它看起来在手机上或当你减小屏幕尺寸时被破坏。 Today I'm cloning this page :
今天我正在克隆这个页面:
https://500px.com/ https://500px.com/
As you can see this site is fully fully responsive, I mean if I reduce the page anyway it will be "ok". 正如你所看到的,这个网站是完全响应的,我的意思是如果我减少页面,无论如何它将是“好的”。 Particulary the first big image with the couple on a mountain, even the text in is responsive!
特别是这对夫妇在山上的第一个大图像,甚至文字都响应!
Here is my code: 这是我的代码:
<!-- 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>
But the image isn't responsive like the website. 但图像不像网站那样响应。 If I reduce it too much, the text and the image will
如果我减少太多,文本和图像将
So here are my two questions : Do they used Jquery/bootstrap/javascript to make their first big image responsive? 所以这是我的两个问题:他们是否使用Jquery / bootstrap / javascript来使他们的第一个大图像响应? If yes can you lead me to some tutotial or try to explain?
如果是,你可以引导我去做一些tutotial或试着解释一下吗? If no how they done that?
如果他们没有这样做的话?
There's no need for jQuery or Javascript, in this case, just plain CSS will do the trick. 不需要jQuery或Javascript,在这种情况下,只需简单的CSS即可。 Instead of using an
img
element we will use a div
and place the image as a background image. 我们将使用
div
并将图像作为背景图像,而不是使用img
元素。
The following would be the html that should replace your img element; 以下是应该替换你的img元素的html;
<div class="responsive_img">
</div>
And this would be your CSS; 这将是你的CSS;
.responsive_img{
width: 100%;
height: 800px;
background: url('http://wallpapercave.com/wp/R6ZWbAb.jpg');
background-size: cover;
background-position: center;
}
Here's a simplified JSFiddle that does what you want, and here is a JSfiddle of how you would implement this into your current demo. 这是一个简化的JSFiddle ,它可以满足你的需要,这里有一个JSfiddle ,你可以在当前的demo中实现它。
There are probably ways of doing this with any of the languages you mentioned in your question, but this is probably the simplest. 使用您在问题中提到的任何语言都可能有这样的方法,但这可能是最简单的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.