속성 background-image과 같이 이미지를 사용하면 cover완벽한 비율의 전체 화면 이미지를 얻습니다. imgjavascript없이에서 동일한 결과를 얻을 수 있습니까?
시차 배경을 만들고 싶습니다. 사용자가 이미지 아래의 콘텐츠를 스크롤하면 이미지 위로 이동합니다.
문제는 이미지의 크기에 있습니다.을 추가 width: 100%했지만 background-size: cover. 너비를 늘려야합니까? 모범 사례는 무엇입니까?
$(document).ready(function(){
function contentHeight() {
var wheight = $(window).height();
$('#content').css({
'margin-top' : wheight
});
}
contentHeight();
$(window).resize(function(){
contentHeight();
});
});html, body {
margin: 0;
}
#image {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#image img {
width: 100%;
}
#content {
background: #ccc;
position: relative;
z-index: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="image"><img src="http://www.planwallpaper.com/static/images/canberra_hero_image.jpg"></div>
<div id="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>당신이 모방하려는 경우 background-size: cover로 img태그 당신은 CSS 속성으로 그렇게 할 수 object-fit와 값 cover. 현재 지원을 확인할 수 있습니다 - 참고 가 제한됩니다 (더 MS 순간에 지원하지 않음).
당신은 에뮬레이트 할 수 있습니다 background-size: cover간단하게 설정하여, 순수 CSS로 img height와 width에를 auto; 이것은의 종횡비를 보존합니다 img. 그러나 img완벽을 중심에 두지는 않을 것이므로 쉬운 수정은 몇 가지 규칙을 추가하여 상위 컨테이너의 중간에 위치하도록하는 것입니다. 부모가 overflow: auto.
background-size: cover여기 에서 와 두 번째 기법 의 비교를 볼 수 있습니다 . COMPARISON
이 특정의 img경우 두 번째 기술이 허용되지만 이미지 크기가 어느 정도 변경되면 이 바이올린에서 볼 수 있듯이 문제가 발생 합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다