가로와 세로 이미지정렬 최적화 문의드려요..
본문
안녕하세요. 오늘은 이미지 정렬에서 해답을 찾지못해 이렇게 질문글을 남기게 되었습니다.
가로 이미지와 세로 이미지가 있는데요
가로 이미지든 세로 이미지든 이렇게 깔끔하게 정렬하고 싶으면
이미지 height="100%" 로 하면 되는데요
페이지 가로사이즈가 변형될경우 그에 크기를 맞추고 싶은데 (width="100%")
이렇게 가로 값을 주게 되면 세로 이미지도 같이 너비가 늘어나서 늘어나보입니다.
이렇게 말이죠..
제가 하고 싶은건 가로세로 영역에 따라 늘어나되,
원래의 비율로 늘어나게 했으면합니다.
조언 부탁드릴께요..
답변 3
세로 크기를 고정하지 않으면,
가로 크기에 따라 세로 크기가 늘어나지 않나요?
문제는 가로크기 때문이에요.
width="100%" 주면 가로 이미지는 괜찮은데
세로이미지가 테이블을 뚫고 나와버립니다.
임시로 테이블을 벗어난 이미지를 숨길수는 있지만
그러면 원래의 이미지를 보여주지 못해서요..
그렇다고 height="100%" 를 주면 이번에는 브라우저 크기에 따라서
이미지 가로사이즈가 줄어들지 않아 문제입니다..
이미지가 가로나 세로 둘중 하나만 있다면 상관없는데
가로와 세로 이미지가 있어서.. 정렬이 너무 힘드네요 ㅠㅠ
미치겠습니다 ㅠㅠ
height 값을 주지 말아 보세요.
http://tour.baragi.net/page/tour/board.php?bo_table=area
여기를 보시면, 중간쯤에 덕풍계곡트래킹 이라는 것이 있는데, 이런 식으로 보여주는 것은 어떤지요?
이미지를 반응형으로 해주시면 원래 비율로 늘어나고 줄어드니 아래와 같이 해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- prororo.jpg 는 뽀로로 이미지, 원본 이미지를 최대크기로 해주세요.-->
<img src="pororo.jpg" class="img-responsive" alt="pororo" >
</div>
</body>
</html>
이렇게 해도 세로 이미지는 테이블을 뚫고 나와요.
가로 사이즈가 원본 크기이기 때문에요.
위 세로이미지를 500*500 안에서 맞추고 싶은데 그게 힘드네요..
세로사이즈를 90% 정도로 조절하면 가로사진 세로사진 모두
500*500 안에 정렬이 되는데
가로사이즈 정의가 안되어 페이지를 반응형으로 만들지를 못해요
그렇다고 가로사이즈를 90% 주면 세로이미지가 늘어나죠..
어떻게 방법이 없을까요...
테이블 500*500 안에 이미지가 있다고 가정하고
img style="width:90%;"
└ 세로사이즈가 테이블을 뚫고 나옵니다.
img style="height:90%;"
└ 가로이미지 세로이미지 모두 제대로 나오지만 반응형이 안됩니다.
img style="width:90%; height:90%;"
└ 세로이미지가 너비가 늘어나서 보기가 흉합니다...
진짜 방법은 없는걸까요 ㅠㅠ
