私は上のボタンで応答性のサムネイル画像を作りたい

Question

I WANT IT TO BE LIKE THIS

http://www.patient-experience.org/Images/Stock-Art/For-Patients.aspx

、その上に画像やボタンの両方をその上にブロックボタンでサムネイル画像を作りたい、それが応答する必要がありますボタンはサムネイル内の画像のサイズをとる必要があります。 私はブートストラップ3を使用しており、上記のdivのためにこれらのクラスを使用しています。 img-responsive、img-thumbnail、btn、btn-block。 !! 誰かが私を助けてくれますか？

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
 
<div class="col-md-12"> <img src="http://www.patient-experience.org/Images/Stock-Art/For-Patients.aspx" class="img-thumbnail"> 
 
<button class="btn btn-block">submit</button></div>

Answer 1

あなたが行く： https://jsfiddle.net/59m0nyfq/1/

<img src="http://www.patient-experience.org/Images/Stock-Art/For-Patients.aspx" class="img-responsive"> 


<button class="btn btn-block" style="display: inline-block; 
position: absolute; bottom: 0; left: 0; 
width: 100%; height: 20%; opacity: 0.5; background-color:red; color:#fff;">submit</button> 

Answer 2

あなたはポジショニングでそれを行うことができます。あなたはdivでそれらをラップし、そのdivにimg-thumbnailを追加する必要があります。

<div class="col-md-12"> 
    <div class="img-thumbnail" style="position: relative;"> 
     <img src="http://www.patient-experience.org/Images/Stock-Art/For-Patients.aspx" class="img-thumbnail"> 
     <button class="btn btn-block" style="display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;">submit</button> 
    </div> 
</div> 

この場合、ボタンは画像に重なるため、不透明度を追加する必要があります。

ここでは、作業はDEMOです。ここで