css 이미지 크기 조절 질문드립니다.
본문
안녕하세요.
그누보드를 이용해 반응형 웹페이지를 만들고 있습니다.
PC버전에선 문제 없이 나오는 와이드 이미지를
모바일에선 가운데 부분만 크롭해서 나오게 하고 싶습니다.
이런식으로 빨간부분만 모바일에서 나오려 하게 하려구요
@media all and (max-width:1200px) {
.test img {height:500px; width:auto}
}
이렇게 세로값을 고정으로 주면 잘나오긴 하는데
좌측정렬을 해버립니다... 가운데 정렬로 할 수 있는 방법이 있을지요...
답변 3
text-align: center;
<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>
.test img {
height: 500px;
width: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
}
이렇게 해보세요
좌측 정렬이 된다면 센터를 잡아줘야죠.
background-position:50% 50%;
답변을 작성하시기 전에 로그인 해주세요.