html - How to set the width of a div equal to the width of its sibling img -
i have html code this:
<div class="card"> <div class="card-content"> <img src="somesource.png" width=480px height=320px> <footer> text here makes width of footer greater width of sibling img tag. </footer> </div> </div>
i want footer have same width of sibling img no matter width of image. widths of images different depending upon images contained want footer have same width of image. have tried following:
.card { display: inline-block; } .card-content { display: flex; flex-direction: column; }
but widens img if footer wider image. not want. want width of footer dependent on width of image , not other way round.
please me. suggestions in advance.
try this
$(document).ready(function(){ var x = $(".card-content > img").width(); var y = $(".card-content > footer").width(); y = x; if(y == x) { $(".card-content > footer").css("width", x); } else{ alert("na"); } });
.card { display: inline-block; } .card-content { display: flex; flex-direction: column; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="card"> <div class="card-content"> <img src="http://searchengineland.com/figz/wp-content/seloads/2015/10/google-panda-name3-ss-1920-800x450.jpg" width=480px height=320px> <footer> text here makes width of footer greater width of sibling img tag. </footer> </div> </div>
Comments
Post a Comment