이전 목록 다음

이미지와 div높이를 같게 설정할 수 있나요?

허허유림
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:04:38 1,112

이미지와 div사각형을 가로로 놓았는데

이미지는 width를 35%, height를 auto로 해놓았고

div는 width를 65%로 설정해놨습니다.

여기서 div의 높이를 이미지와 같게 설정할 수 있나요?

그누보드5
|

답변 4개 / 댓글 2개

근근자
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 13:36:09

$(document).ready(function(){

    img_height();

    $(window).resize(function(){

        img_height();

    });

    function img_height(){

        var $height = $('#target').height();

        $('#target').sibling('div').css('height',$height);

    };

});
이런식으로 작성하시면 될 것 같습니다

비비타주리
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:33:03

<img id=myImg style=width:35%;height:auto;display:block;float:left src=https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg>
<div id=myDiv style=width:65%;background-color:blue;float:left ></div>

위와 같다고 한다면...

소스 하단부에 이미지의 세로길이를 추출하여 스크립트로 div 의 style.height 로 주세요.

<img id=myImg style=width:35%;height:auto;display:block;float:left src=https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg>
<div id=myDiv style=width:65%;background-color:blue;float:left></div>

<script>
myDiv.style.height = myImg.height + 'px';
</script>

플래토
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:18:16

div의 height를 auto로 해보세요

이미지는 가로폭에 맞는 세로가 잡히겠지만
div는 컨텐츠내용에 맞는세로폭으로 맞아질테니

그래도 위아래 공백이 생기면

padding:0px;

margin:0px;

border:0px;

를 같이 사용해보세요

핑크빈
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:06:00

height 값을 동일하게 해주면되지않을까요..?

답변에 대한 댓글 2개

허유림
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:08:09
오토로 해놔서 창 크기에 따라 달라져서요...
Phillips
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2021-07-26 (월) 12:16:15
jquery로 해결할수있겠네요.

$('#div').height($('#logo').height());

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