HTML 페이지에 이미지가 표시되는 경우 표시할 영역보다 이미지 크기가 큰 경우 가로 세로 비율 (세로 비율) 이 상자와 일치하지 않아 이미지가 신축되어 표시됩니다.
　「 imgLiquid 」이런 플러그인은 상자 안에서 그림의 크기를 다시 조정해서 표시하기 때문에 매우 편리하다.사용법도 간단하니 제가 소개해 드릴게요.
(이 문장에서 이미 소개되었고 이 글도 선택할 수 있는 설명을 약간 추가했다.

획득 방법

사용 방법

jQuery 및 imgLiquid.가져오기 js

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/imgLiquid-min.js"></script>

img 태그를 포함하는 요소에 id 할당

<div id="img-container" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>

img 태그가 포함된 요소에 imgLiquid 실행

<script>
$('#img-container').imgLiquid();
</script>

옵션 정보

옵션 없음

<script>
$('#img-container').imgLiquid();
</script>

종횡비 를 유지하다

<script>
$('#img-container').imgLiquid({ fill: false });
</script>

이미지의 수직 위치 지정하기

수직 정렬에서 지정합니다.센터/top/bottom 등.

<script>
$('#img-container').imgLiquid({ verticalAlign: 'top' });
</script>

수평 위치 지정

horizontalAlign에서 지정합니다.센터/left/right 등.

<script>
$('#img-container').imgLiquid({ fill: false, horizontalAlign: 'right' });
</script>

HTML5의 개별 데이터 속성으로 옵션을 지정할 수도 있습니다.

다음 속성을 지정할 수 있습니다.

data-imgLiquid-fill

data-imgLiquid-verticalAlign

data-imgLiquid-horizontalAlign

<div id="img-container" data-imgLiquid-fill="false" data-imgLiquid-horizontalAlign="left" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>
<script>
$('#img-container').imgLiquid();
</script>