jQuery를 사용하여 이미지를 반응형으로 만드는 방법은, 브라우저 창 크기에 맞춰 이미지의 크기를 동적으로 조정하는 것입니다. CSS만으로도 반응형 이미지를 만들 수 있지만 jQuery를 사용하면 좀 더 세밀하게 조정하거나 특정 조건을 추가할 수 있습니다.
아래는 CSS와 jQuery를 조합하여 반응형 이미지를 만드는 방법입니다.
1. CSS로 기본 반응형 이미지 설정
가장 먼저 CSS로 이미지의 너비를 100%로 설정하여 반응형으로 기본 설정을 해줍니다.
img.responsive {
width: 100%;
height: auto; /* 비율을 유지하며 크기 조절 */
max-width: 600px; /* 최대 너비 제한 */
}
위 코드는 이미지의 너비가 부모 요소 너비의 100%에 맞춰지도록 하며 max-width를 설정하여 지나치게 커지지 않도록 제한할 수 있습니다.
2. jQuery로 반응형 이미지 크기 조절
jQuery를 사용하여 브라우저 창 크기가 변경될 때 이미지의 크기를 동적으로 조정할 수 있습니다. 특히 창 크기가 특정 크기 이하로 줄어들 때 추가적으로 이미지를 조절하려는 경우 유용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image with jQuery</title>
<style>
img.responsive {
width: 100%;
height: auto;
max-width: 600px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<img src="your-image.jpg" alt="Responsive Image" class="responsive">
<script>
$(document).ready(function() {
function resizeImage() {
const windowWidth = $(window).width();
if (windowWidth < 768) {
$('img.responsive').css('max-width', '300px'); // 작은 화면에서는 최대 너비 조정
} else {
$('img.responsive').css('max-width', '600px'); // 큰 화면에서는 원래 크기로
}
}
resizeImage(); // 페이지 로드 시 실행
$(window).resize(resizeImage); // 창 크기 변경 시 실행
});
</script>
</body>
</html>
설명
- CSS: img.responsive 클래스로 기본적으로 이미지를 반응형으로 설정하되 max-width를 지정하여 너무 커지지 않도록 합니다.
- jQuery: resizeImage 함수로 브라우저 너비가 768px 이하일 때 이미지의 최대 너비를 줄입니다. resizeImage() 함수는 창이 로드될 때와 크기가 변경될 때마다 호출됩니다.
#jquery #css #html #img #responsive #resize #resizeImage #resize
반응형
'프로그램' 카테고리의 다른 글
| jQuery의 hover() 이벤트를 활용한 실용적인 예제들 (0) | 2024.11.19 |
|---|---|
| jQuery의 click() 이벤트를 실용적으로 활용하는 기본적인 예제 (0) | 2024.11.18 |
| jquery 숫자만 입력 체크, 천 단위 콤마 자동 추가 (0) | 2024.10.30 |
| jQuery를 사용하여 현재 파일에서 다른 파일로 이동한 후 해당 파일 내 특정 위치로 스크롤 (0) | 2024.10.22 |
| jQuery로 iframe에서 부모 창 함수 호출 (0) | 2024.09.28 |
댓글