css 이미지 퀄리티 처리 방법 (feat.이미지 크롭)

안녕하세요. 비버팩토리입니다.

이번 주제는 이미지 비율을 주는 방법을 설명합니다. 간단하게 사용법으로 설명 남깁니다.

 

html5로 한다면 

img 마크업와 figure 마크업 으로 클래스를 주고 아래 css 입히면 됩니다.

크기는 고정이 아니라 레이아웃을 보면서 키워주면 됩니다.

.imgBox {
    width: 300px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.parent {
    width: 300px;
    aspect-ratio: 16/9;
}

 

그리고 php 에 경우 gd 라이브러리가 있어서 

그걸 활용하면됩니다.

그누보드에 경우에는 두번째 사이트 참고하면 됩니다.

$thumb = get_list_thumbnail($bo_table, $wr_id, $thumb_width, $thumb_height, 1, 1, 'center',true,1);

 

$is_create=true,
$is_sharpen=true,
$um_value='1'

전부다 풀어주고 

 

사이즈는 예를들어서 가로 800, 세로 400 으로 잡으면 됩니다. 이건 예시이기 때문에 보면서 점점 키우면 됩니다.

 

 

 

https://cocococo.tistory.com/entry/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%97%98%EB%A6%AC%EB%A8%BC%ED%8A%B8-%EB%B9%84%EC%9C%A8-%EC%A1%B0%EC%A0%95#google_vignette

[CSS] 이미지/엘리먼트 비율 조정

 

 

https://sir.kr/qa/177250

썸네일 크롭 함수 > SIR