SIR
이전 목록 다음
채택완료

css 이미지 크기 조절 질문드립니다.

다다나한포션
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 1,818

안녕하세요.

그누보드를 이용해 반응형 웹페이지를 만들고 있습니다.

 

PC버전에선 문제 없이 나오는 와이드 이미지를

모바일에선 가운데 부분만 크롭해서 나오게 하고 싶습니다.

 

 

3076732454_1664025469.0486.png

 

 

이런식으로 빨간부분만 모바일에서 나오려 하게 하려구요

 

@media all and (max-width:1200px) {
.test img {height:500px; width:auto}
}

 

이렇게 세로값을 고정으로 주면 잘나오긴 하는데

좌측정렬을 해버립니다... 가운데 정렬로 할 수 있는 방법이 있을지요...

그누보드5
|

답변 3개

채택된 답변
+20 포인트
배배르만
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

text-align: center;

Copy 
<style>
.test { text-align: center; background-color: #ddd; }
@media all and (max-width:1200px) {
    .test img {height:500px; width:auto}
}
</style>

<div class="test"><img src="https://sir.kr/data/editor/2209/3076732454_1664025469.0486.png" /></div>
애애드프로
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

좌측 정렬이 된다면 센터를 잡아줘야죠.

background-position:50% 50%;

위위버
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 
.test img {
    height: 500px;
    width: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

이렇게 해보세요

답변을 작성하려면 로그인이 필요합니다.

🐛 버그신고