검색어 : css 이미지 비율 유지
비율 유지하며 이미지 사이즈 조절하기
참조 : stackoverflow.com/questions/1143517/jquery-resizing-image
$(document).ready(function() {
$('.story-small img').each(function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height; // get ratio for scaling image
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});css 에서 간단히 이미지 리사이즈를 제공하긴 합니다. :)
auto 기능입니다. auto는 여기저기서 많이 보셨겠지만..
이렇게 쓸수가 있네요. 간단합니다.
img { width: 200px; height: auto; }
이건데요. 너비를 200px 로 만들고 height은 그 비율에 맞추어서 보여주어라 라는 뜻입니다. 만약 저 문구 그대로를 css 파일에 넣으신다면 모든 이미지들의 너비는 200으로 바뀌게 됩니다. :)
특정 div 에 쓰는 그림에만 효과를 주고 싶다면 <div class=”width200″> 이렇게 이름을 정한후
css 에서 .width200 img { width: 200px; height: auto; } 이것을 넣어주면 됩니다.
직접 html 안에 쓰고 싶다면 
로 정해주면 되겠네요. style=”width: 100px;height:auto;” 부분이 들어갔네요.
실제로 적용한 이미지 입니다.
원본이미지
width만 100으로 정해진 그림도 가능하긴 하네요
이미지 출처: www.mandalas.freeserve.co.uk
이미지의 가로세로비를 유지하면서 틀 안에 맞추려면
웹사이트 중에는 종종 이미지가 가로세로비(종횡비)를 못 맞추고 짜부라진 모양으로 나오는 곳들이 있다. 크기가 큰 사진들은 괜찮은데 좁은 자리에 가로 세로 크기를 한정시켜 맞춰넣는 얼굴 사진이나 광고 같은 것들에 그런 게 종종 보인다. 얼굴이 너무 넓적하다든지 몸매가 완전 날씬한 형태로 나오는 사진들이 그런 것들이다.
우리의 영웅 연아를 이렇게 만들다니…
위 그림은 신문사 사이트에서 갈무리한 것인데 같은 개발자 입장에서 미안하지만 개발자가 좀 덜 신경을 쓴 게 분명하다. 원래 이미지는 다음처럼 세로가 긴 이미지였다.
원래는 이렇게 예쁨
사실 어렵지 않은 것인데 오늘은 웹페이지에서 이미지의 가로세로비를 유지하면서 틀 안에 맞추려면 어떻게 해야 하는지 알아보겠다.
먼저 기본 개념을 말하자면 다음과 같은 것을 생각해볼 수 있다.
- 이미지가 로딩되면 자바스크립트로 이미지 본래의 가로, 세로 크기를 구할 수 있다
- CSS의 width, height 속성 중 한쪽만 수치 값을 설정하고 다른 쪽은 auto로 하면 비율이 유지된다
- CSS의 overflow 속성을 사용해 HTML 요소의 경계 바깥으로 벗어나는 컨텐트를 숨길 수 있다
- 이미지를 틀에 맞춘다 함은 두 가지 경우가 있다. 틀을 이미지의 뷰포트로서 처리하는 경우와 액자처럼 이미지를 틀 안에 맞춰 넣는 것 같은 경우다.
위에서 세번째 개념은 다음과 같은 경우를 말한다. 예시는 4:3 크기의 틀을 가정했다.
1. 이미지를 맞출 틀 안에 이미지의 가로, 세로 중 짧은 쪽을 맞춰서 틀을 벗어나게 하는 경우. 틀을 벗어나는 이미지 부분은 잘라낸다(숨긴다).
틀을 이미지의 뷰포트처럼 맞추는 경우
2. 이미지를 맞출 틀 안에 이미지의 가로, 세로 중 긴 쪽을 맞춰서 틀을 벗어나지 않게 하는 경우. 대신 틀과 이미지의 비율이 안맞으면 여백이 생긴다.
이미지를 액자 안에 넣은 것처럼 맞추는 경우
여기서는 1번을 해보려고 한다. 2번은 1번에 비해 이미지가 작아지고 여백이 생겨 보기가 안 좋다고 생각한다.
기본적인 HTML 구조는 <div>로 <img>를 감싸는 형태가 된다. <div>는 원하는 가로세로비를 적용하여 크기를 설정해놓고 overflow: hidden을 주면 되고 <img>는 위 1번이나 2번 중 원하는 방식에 따라 크기와 위치를 지정해주면 된다.
아래는 위 1번에서 첫번째 경우일 때 결과적으로 나와야할 소스 예시다. 틀 크기가 120 x 90일 때 그보다 큰 이미지가 잘려보이도록 하는 것이다.
두번째 경우는 다음과 같이 돼야할 것이다. 첫번째와 달리 이미지를 가운데 맞추려고 margin-left를 추고 있다.
차이가 나는 건 이미지의 크기와 위치다. div의 크기는 사전에 결정돼있고 이미지의 크기는 매번 달라지므로 이미지의 크기와 위치를 처리하기 위해 자바스크립트가 필요하다.
이제 다시 처음부터 시작한다고 했을 때(이미지 크기를 모를 때) 원래의 HTML이 다음과 같다면,
자바스크립트를 어떻게 만들어야 할까? 이미지의 크기를 구해서 가로세로비를 구한 다음 바깥의 가로세로비에 따라 조정해주면 된다. 일단 jQuery 같은 외부 라이브러리를 사용하지 않고 해보도록 하자.
위에서 8 ~ 10행의 수식 계산은 이미지를 좌우로 가운데 맞춤하기 위한 계산이다.div.offsetHeight / divAspect에서 이미지가 맞춰야할 가로 크기가 나오므로 비율을 맞춰 축소한 이미지의 가로 크기에서 빼고 그 반 값을 margin-left로 설정하는 것이다.
15행의 세로로 길쭉한 이미지에 대해서는 가운데 맞춤을 안하고 있다. 필요하다면 여기도 가운데 맞춤 계산을 해주면 좋을 것이다. 대신 여기서는 margin-left를 초기화시켜준다. 위 루틴이 웹페이지 초기화 과정에서 딱 한번만 호출된다는 보장이 없기 때문에 매번 호출될 때마다 가급적 모든 값을 설정해주는 것이 좋다.
자, 이상으로 마치고 이제 위 소스를 적용한 예시를 아래 링크로 붙인다. 모두들 우리의 영웅 사진은 영웅 답게 보여주도록 하자.
'차근차근 > HTML CSS' 카테고리의 다른 글
| float:left 가운데 정렬 (2) | 2014.09.29 |
|---|---|
| 이미지 비율 유지 (0) | 2014.09.23 |
| [Tip] CSS 가운데 정렬 (0) | 2014.09.23 |
| 초보자분들을 위한 CSS 20가지 유용한 TIPS (하드코딩하는사람들) (0) | 2014.08.19 |
| div 중앙정렬 , div center (0) | 2014.07.29 |