블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.tistory.com/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형
이미지를 정사각형으로 만들기
단순히 image의 width와 height를 동일하게 해도 되지만, 그렇게하면 이미지가 늘어지거나 축소된다. (보기 좋지 않음)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css" />
<title>이미지 가운데 정렬하기</title>
</head>
<body>
<img
src="https://thumb.mt.co.kr/06/2021/06/2021061415420468740_1.jpg/dims/optimize/"
alt="브레이브걸스"/>
</body>
</html>
index.css
body {
padding: 0;
margin: 0;
width: 100%;
}
img {
width: 500px;
height: 500px;
}
본 글에서는 위와같이 하는 방법이 아닌, 비율은 유지하면서 정사각형을 벗어나는 부분은 보이지 않도록 하는 방법을 소개한다.
이미지를 정사각형 모양으로 자르기
아래와 이미지 같이 가로, 세로의 길이가 다른 이미지가 있을때 정사각형 모양으로 이미지를 자르는 방법을 살펴보자
(아래 '브레이브걸스' 이미지는 세로보다 가로가 더 길다)
정사각형 영역을 벗어나면 이미지의 비율은 건드리지 않고, 이미지를 잘라서 보여주도록 해보자
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css" />
<title>이미지 가운데 정렬하기</title>
</head>
<body>
<div class="img-wrapper">
<img
src="https://thumb.mt.co.kr/06/2021/06/2021061415420468740_1.jpg/dims/optimize/"
alt="브레이브걸스"/>
</div>
</body>
</html>
index.css
body {
padding: 0;
margin: 0;
width: 100%;
}
.img-wrapper {
position: relative;
width: 500px;
height: 500px;
}
.img-wrapper img {
position: absolute;
top: 0;
left: 0;
transform: translate(50, 50);
width: 100%;
height: 100%;
object-fit: cover;
margin: auto;
}
이미지의 비율은 변하지 않고, 가로부분만 잘라서 정사각형 형태로 보여준다.
세로가 더 긴 경우?
세로의 길이가 더 긴 이미지는 어떻게 될까?
상관없이 동일하게 정사각형 모양으로 잘라준다.
반응형
'Frontend > HTML, CSS, JS' 카테고리의 다른 글
| html 문법과 태그의 종류 (0) | 2021.12.16 |
|---|---|
| 날짜/시간 라이브러리 moment.js 버그? (0) | 2021.12.16 |
| 웹(Web)에서 HTML, CSS, JS의 역할 (0) | 2021.10.27 |
| Javascript의 forEach, map, filter 함수 (0) | 2020.11.09 |
| Javascript 연, 월, 일 계산하기 (날짜 조작) (0) | 2020.07.03 |
