@8/24/2022
사용자는 믿을 수 없다. 길쭉한 사진을 올리면 Frontend가 망가진다.
사용자는 모두 다른 사이즈의 사진을 올리지만 모든 사진들은 동일한 사이즈로 보여져야 한다.
하지만 이미지 사이즈 변경은 이미지를 늘리고 미관을 망친다.
이럴때 필요한게 crop이다 crop은 해당 사이즈를 액자로 보고 해당 액자에 맞게 사진을 잘라서 넣는 개념이다.
아래 코드를 적용하면 사진 정 중앙을 기준으로 잘라서 액자에 넣을 수 있다.
<img width="400px" height="200px">
HTML
복사
img 태그 옵션
img {
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
}
CSS
복사
CSS
왼쪽: 사이즈만 변경 , 오른쪽: CSS가 적용되어 이미지가 늘어나지 않고 가운데로 crop됨
원본
사이즈만 변경
CSS 적용하여 CROP