HTML - 改變圖像內部的圖像並保持幀大小不變

我的主要目標是讓一個簡單的框架（如您所見），幾乎沒有文本行和圖像。我想要做的是讓這個框架變得靈活。我的意思是 - 如果我改變裏面的圖片（更大 - >更小），框架應該改變。它應該保持固定。HTML - 改變圖像內部的圖像並保持幀大小不變

在線編輯：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：

/* 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; 
}

我試圖height屬性添加到諸如：

.single-image { ... height：405px; }

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

但它看起來不正確的，因爲底部的文字漂浮的地方了。我需要針對不同類型圖像尺寸的解決方案。有任何想法嗎？

來源

2017-07-06 PeterPakla

您還需要設置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; 
}

來源

2017-07-06 09:31:15

嘗試在您的css代碼中添加這個新行。

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

它會看起來像這樣

Output

來源

2017-07-06 09:35:10

使用嘗試柔性

.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>

來源

2017-07-06 09:59:24

HTML - 改變圖像內部的圖像並保持幀大小不變

回答

相關問題