테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

css 이미지 크기 조절 질문드립니다. 채택완료

다나한포션 3년 전 조회 1,646
답변 3
목록

안녕하세요.

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

 

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

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

 

 

 

 

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

 

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

 

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

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

#그누보드5
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
배
배르만
3년 전

text-align: center;

</p>

<p><style>

.test { text-align: center; background-color: #ddd; }

@media all and (max-width:1200px) {

    .test img {height:500px; width:auto}

}

</style></p>

<p><div class="test"><img src="<a href="https://sir.kr/data/editor/2209/3076732454_1664025469.0486.png"" target="_blank" rel="noopener noreferrer">https://sir.kr/data/editor/2209/3076732454_1664025469.0486.png"</a> /></div></p>

<p>

로그인 후 평가할 수 있습니다

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

애

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

background-position:50% 50%;

로그인 후 평가할 수 있습니다

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

세크티
세크티
3년 전
.test img {
    height: 500px;
    width: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

이렇게 해보세요

로그인 후 평가할 수 있습니다

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

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

로그인