[imgLiquid] 반응형 이미지 이미지리퀴드 사용법

컨테이너에 맞게 이미지 크기를 조절해주는 jQuery 플러그인입니다.

반응형에서도 이미지가 깨지지않게 해주고, 사용법도 쉽고 간단합니다.

 

 

1. js파일 다운로드

https://github.com/karacas/imgLiquid

GitHub - karacas/imgLiquid: jQuery plugin to resize images to fit in a container.

깃허브 홈페이지에 가서 js파일을 다운로드 받아줍니다.

 

 

2. js파일 연결

<script src="js/imgLiquid-min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/imgLiquid/0.9.944/js/imgLiquid-min.js" integrity="sha512-r4VzkuVP3meRHq9OT0J0TwErGgUs9tMV8P/RR9U8X/EDAaDxx+nwCrOq885oW3OPwp3YVRm6hDgngWRHynh1FA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

git에서 다운받아서 연결하거나

아래의 cdn링크를 사용하시면 됩니다~ 

 

 

3. html 

<div class="imgLiquidFill imgLiquid" style="width:300px; height:200px;">
	<img alt="Woody" src="woody.jpg" />
</div>

 

4. js 선언

$(document).ready(function() {
	$(".imgLiquidFill").imgLiquid();
});

 

결과확인

https://codepen.io/karacas/pen/nlugd