css 이미지 사이즈 자동조절

.photo--section--image img {
    width: 100%;
    height: 540px;
    object-fit: contain;

}

워드프레스에서 이미지 가로 세로 사이즈가 다양해 페이지에 너무 크거나 작게 표시될때가 있다.
이미지 영역에서 위와 같이 css 를 넣어주면 contain 값에의해 자동으로 조절된다.
위 코드를 참고해서 이미지를 정렬을 맞출수있다.

다음의 옵션들로 조절해볼수 있다.

fill 은 늘려서 찌그러져도 꽉 채운다.
contain 영역에 맞게 여백이 남더라도 찌그러지지 않게 채운다.
cover 이미지 원본 그대로 영역에서 맞게 잘라내며 채운다.
none 원본 그대로 크면 잘리면서 채우고 작으면 여백을 남기면서 채운다.
scale-down 원본보다 작아지며 contain 처럼 채운다.

위 코드를 이용하면 다양한 이미지를 한곳에 정리되게 나타나게 할수 있다.
쇼핑몰 만들때 미리보기 이미지를 나타나게 할때 매우 유용하다..
디지털 다운로드 콘텐츠 스토어 만들면서 미리보기 이미지 때문 문제였는데 완전 유용했다…🤩🤩🤩