HTML - フレーム内の画像を変更してフレームのサイズをそのまま維持する

Question

私の主な目標は、テキストの線と画像がほとんどない単純なフレームを見ることです。私がやりたいことは、このフレームを柔軟にすることです。それは私が意味することです - もし私がそれの中で絵を変えれば（より大きい - >小さく）、フレームは変化するはずです。それは固定しておく必要があります。

オンラインエディタ：https://www.bootply.com/Y09Zn1wir3#

HTML：

<div class="col-md-4"> 
    <div class="single-image-wrap"> 
    <div class="single-image"> 
     <div class="name">NAME</div> 
     <div class="img-wrap"> 
     <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image"> 
     </div> 
     <div class="extra-info"> 
     <div class="bottom-text">ABC</div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="col-md-4"> 
    <div class="single-image-wrap"> 
    <div class="single-image"> 
     <div class="name">NAME</div> 
     <div class="img-wrap"> 
     <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image"> 
     </div> 
     <div class="extra-info"> 
     <div class="bottom-text">ABC</div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：私はheightプロパティを追加しようとしました

/* CSS used here will be applied after bootstrap.css */ 
.single-image{ 
    border: 1px solid orange; 
    width: 100%; 
    text-align: center; 
    margin: 0px 0px 15px 0px; 
    float: right; 
} 


.name{ 
    padding: 20px 0px 0px 0px; 
    color: black; 
    height: 75px; 
    font-size: 18px; 
} 

.img-wrap{ 
    padding-bottom: 50px; 
    padding-top: 25px; 
} 

.first-image{ 
    width: 200px; 
} 

.second-image{ 
    width: 150px; 
} 

.extra-info{ 
    border-top: 1px solid orange; 
} 

.bottom-text{ 
    padding-top: 15px; 
    height: 50px; 
    letter-spacing: 0.1em; 
}    

など：

。単一画像{ ... 身長：405px; }

結果：https://www.codeply.com/go/2s2hH3nbju

下のテキストは、どこかに浮き上がるようしかし、それは、正しく見えません。 さまざまな種類の画像サイズに対応するソリューションが必要です。何か案は？

Answer 1

heightを.img-wrapに設定する必要があります。

.single-image{ 
    border: 1px solid orange; 
    width: 100%; 
    text-align: center; 
    margin: 0px 0px 15px 0px; 
    float: right; 
    height: 405px; 
} 

.img-wrap{ 
    padding-bottom: 50px; 
    padding-top: 25px; 
    height:250px; 
    overflow:hidden; 
} 

Answer 2

この新しい行をCSSコードに追加してください。

.img-wrap{ 
    min-height: 275px; 
} 

それこの

Output

Answer 3

のようなルックスは、フレックス

.single-image{ 
 
    border: 1px solid orange; 
 
    width: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100%; 
 
    justify-content: space-between; 
 
} 
 

 

 
.name{ 
 
    padding: 20px 0px 0px 0px; 
 
    color: black; 
 
    height: 75px; 
 
    font-size: 18px; 
 
} 
 

 
.img-wrap{ 
 
    padding-bottom: 50px; 
 
    padding-top: 25px; 
 
} 
 

 
.first-image{ 
 
    width: 200px; 
 
} 
 

 
.second-image{ 
 
    width: 150px; 
 
} 
 

 
.extra-info{ 
 
    border-top: 1px solid orange; 
 
    align-self: bottom; 
 
} 
 

 
.bottom-text{ 
 
    padding-top: 15px; 
 
    height: 50px; 
 
    letter-spacing: 0.1em; 
 
}    
 

 
.images-wrap{ 
 
display: flex; 
 
} 
 

 
.single-image-wrap { 
 
    height: 100%; 
 
    margin-bottom: 15px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
    <div class="row images-wrap"> 
 
    <div class="col-xs-6 col-md-4"> 
 
    <div class="single-image-wrap"> 
 
    <div class="single-image"> 
 
     <div class="name">NAME</div> 
 
     <div class="img-wrap"> 
 
     <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="first-image"> 
 
     </div> 
 
     <div class="extra-info"> 
 
     <div class="bottom-text">ABC</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6 col-md-4"> 
 
    <div class="single-image-wrap"> 
 
    <div class="single-image"> 
 
     <div class="name">NAME</div> 
 
     <div class="img-wrap"> 
 
     <img src="https://cdn.pixabay.com/photo/2013/07/12/14/07/basketball-147794_960_720.png" class="second-image"> 
 
     </div> 
 
     <div class="extra-info"> 
 
     <div class="bottom-text">ABC</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
    </div>

を使用してみてくださいます