안녕하세요. 오늘은 이미지 정렬에서 해답을 찾지못해 이렇게 질문글을 남기게 되었습니다.
가로 이미지와 세로 이미지가 있는데요
가로 이미지든 세로 이미지든 이렇게 깔끔하게 정렬하고 싶으면
이미지 height="100%" 로 하면 되는데요
페이지 가로사이즈가 변형될경우 그에 크기를 맞추고 싶은데 (width="100%")
이렇게 가로 값을 주게 되면 세로 이미지도 같이 너비가 늘어나서 늘어나보입니다.
이렇게 말이죠..
제가 하고 싶은건 가로세로 영역에 따라 늘어나되,
원래의 비율로 늘어나게 했으면합니다.
조언 부탁드릴께요..
답변 3개 / 댓글 3개
테이블 500*500 안에 이미지가 있다고 가정하고
img style="width:90%;"
└ 세로사이즈가 테이블을 뚫고 나옵니다.
img style="height:90%;"
└ 가로이미지 세로이미지 모두 제대로 나오지만 반응형이 안됩니다.
img style="width:90%; height:90%;"
└ 세로이미지가 너비가 늘어나서 보기가 흉합니다...
진짜 방법은 없는걸까요 ㅠㅠ
이미지를 반응형으로 해주시면 원래 비율로 늘어나고 줄어드니 아래와 같이 해주세요.
<!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>
답변에 대한 댓글 1개
세로 크기를 고정하지 않으면,
가로 크기에 따라 세로 크기가 늘어나지 않나요?
답변에 대한 댓글 2개
width="100%" 주면 가로 이미지는 괜찮은데
세로이미지가 테이블을 뚫고 나와버립니다.
임시로 테이블을 벗어난 이미지를 숨길수는 있지만
그러면 원래의 이미지를 보여주지 못해서요..
그렇다고 height="100%" 를 주면 이번에는 브라우저 크기에 따라서
이미지 가로사이즈가 줄어들지 않아 문제입니다..
이미지가 가로나 세로 둘중 하나만 있다면 상관없는데
가로와 세로 이미지가 있어서.. 정렬이 너무 힘드네요 ㅠㅠ
미치겠습니다 ㅠㅠ
http://tour.baragi.net/page/tour/board.php?bo_table=area
여기를 보시면, 중간쯤에 덕풍계곡트래킹 이라는 것이 있는데, 이런 식으로 보여주는 것은 어떤지요?
답변을 작성하려면 로그인이 필요합니다.
가로 사이즈가 원본 크기이기 때문에요.
위 세로이미지를 500*500 안에서 맞추고 싶은데 그게 힘드네요..
세로사이즈를 90% 정도로 조절하면 가로사진 세로사진 모두
500*500 안에 정렬이 되는데
가로사이즈 정의가 안되어 페이지를 반응형으로 만들지를 못해요
그렇다고 가로사이즈를 90% 주면 세로이미지가 늘어나죠..
어떻게 방법이 없을까요...