이미지와 div높이를 같게 설정할 수 있나요?
본문
이미지와 div사각형을 가로로 놓았는데
이미지는 width를 35%, height를 auto로 해놓았고
div는 width를 65%로 설정해놨습니다.
여기서 div의 높이를 이미지와 같게 설정할 수 있나요?
답변 4
height 값을 동일하게 해주면되지않을까요..?
오토로 해놔서 창 크기에 따라 달라져서요...
jquery로 해결할수있겠네요.
$('#div').height($('#logo').height());
div의 height를 auto로 해보세요
이미지는 가로폭에 맞는 세로가 잡히겠지만
div는 컨텐츠내용에 맞는세로폭으로 맞아질테니
그래도 위아래 공백이 생기면
padding:0px;
margin:0px;
border:0px;
를 같이 사용해보세요
<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>
$(document).ready(function(){
img_height();
$(window).resize(function(){
img_height();
});
function img_height(){
var $height = $('#target').height();
$('#target').sibling('div').css('height',$height);
};
});
이런식으로 작성하시면 될 것 같습니다