Как установить ширину DIV, равную ширине его родственного IMG

Question

У меня есть HTML-код, как это:

<div class="card"> 
    <div class="card-content"> 
     <img src="somesource.png" width=480px height=320px> 
     <footer> 
     Some text here that makes the width of this footer greater than the width of sibling img tag. 
     </footer> 
    </div> 
</div> 

Я хочу футер иметь ту же ширину, что его родной брат IMG нет вопрос какой ширины изображения. Ширина изображений будет отличаться в зависимости от содержащихся изображений, но я хочу, чтобы нижний колонтитул имел ту же ширину, что и изображение. Я попытался следующие:

.card { 
    display: inline-block; 
} 
.card-content { 
    display: flex; 
    flex-direction: column; 
} 

Но это расширяет IMG, если сноска шире, чем изображение. Это не то, что я хочу. Я хочу, чтобы ширина нижнего колонтитула зависела от ширины изображения, а не наоборот.

Пожалуйста, помогите мне. Спасибо за предложения заранее.

Answer 1

Попробуйте

$(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> 
 
     Some text here that makes the width of this footer greater than the width of sibling img tag. 
 
     </footer> 
 
    </div> 
 
</div>

Answer 2

Для этого вы можете использовать display: table на родительском элементе и установить width: 1%.

.card-content { 
 
    display: table; 
 
    width: 1%; 
 
} 
 
footer { 
 
    background: lightgreen; 
 
}

<div class="card"> 
 
    <div class="card-content"> 
 
    <img src="http://placehold.it/480x320"> 
 
    <footer> 
 
     Some text here that makes the width of this footer greater than the width of sibling img tag. 
 
    </footer> 
 
    </div> 
 
</div>

Answer 3

добавить max-width. Надеюсь, что это также достаточно, чтобы просмотреть элемент в такой же ширины

.card-content { 
    display: flex; 
    flex-direction: column; 
max-width:480px; 
} 

Answer 4

Так как изображение и нижний колонтитулы в одном DIV без другого брата, они могут легко обмениваться одинаковую ширину родительского DIV с классом карты-контента.

Просто добавьте

img{ 
width : inherit; 
} 

footer : { 
width : inherit 
} 

Fiddle: https://jsfiddle.net/qo6e9882/1/