我終於放棄了我以前的想法...我試着用桌子，但似乎也很難。我還有一個想法：方化包含分區：畫廊與標題的方形微型

底部（無百分比）肯定與文本：position:absolute;bottom:0;
微型img-responsive在標題的頂部垂直/水平居中（也許display:table-cell;可以幫助）

我經常看到一個的預定義widht解決方案（如30％左右），但我希望這能適應任何寬度（因爲他們會根據屏幕大小而不同）

|-------------------| |-------------------| 
|     | |   I   | 
|     | |   M   | 
|p i c t u r e| |   A   | 
|     | |   G   | 
|     | |   E   | 
|title (caption) | |title (caption) | 
|-------------------| |-------------------|

PREVIOUSLY

這是3小時數我想要得到我想要的，但不可能（檢查計算器，引導選項的jsfiddle，W3Schools的和其他人......）

我的問題的樣子莫名其妙地簡單：

目標是得到一個格式化的畫廊。

我解釋我的自我：每個「縮略圖」（自舉的一個）必須是正方形，幷包含：

縮略圖（最大高度的70％，100％的寬度，垂直和水平居中）和需要是填充寬度或高度
下（30％左，垂直和水平居中）

標題作爲一個圖像比我創建的塗料長文本更好 Example

我代表3列，但這個想法是

我試圖得到儘可能多的，因爲我需要在一排：

使用表
Modify This（因爲標題ISN」噸垂直居中於30％
一劈到中心，但是當高度是不是一個像素值（不能發佈超過2個鏈接）
和各種其它

作爲一個說明，我只想使用CSS，並在我的網站上獲得Bootstrap。

我希望你明白我的問題，並會幫助我解決這個問題。

使用下面的評論，我的代碼現在看起來：

<a href="#" class="thumbnail outer" target="_blank"> 
<div class="inner"> 
    <div style="height:80%; display:flex;"> 
    <img src="src.jpg" class="img-responsive" style="margin:auto;"> 
    </div> 
    <div class="caption"> 
     <h3 class="text-center">Title</h3> 
    </div> 
</div> 
</a>

這工作得很好，但垂直圖像不正確調整。請給我一個黑客允許這種（添加max-height:100%;不起作用」

來源

2016-12-13 homer

我發現我的解決方案的一個工作部分[這裏]（http://stackoverflow.com/questions/31862091/create-a-perfect-square-div-responsive） – homer

最後我得到了我的答案，也許不是最佳的，但這個工程：

.image{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    padding-bottom:80%; 
 
\t height:100%; 
 
    margin:0px; 
 
} 
 
.outer img{ 
 
\t margin:auto; 
 
} 
 

 
.outer { 
 
\t width:100%; 
 
\t height:100%; 
 
    position:absolute; 
 
\t display:flex; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
<div class="col-xs-3"> 
 
    <a href="#" class="thumbnail"> 
 
    <div class="image"> 
 
\t <div class="outer"> 
 
\t <img src="http://placehold.it/350x150" class="img-responsive"> 
 
\t </div> 
 
    </div> 
 
\t <div class="caption"> 
 
\t <h3 class="text-center">Title</h3> 
 
\t </div> 
 
    </a> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <a href="#" class="thumbnail"> 
 
    <div class="image"> 
 
\t <div class="outer"> 
 
\t <img src="http://placehold.it/150x350" class="img-responsive"> 
 
\t </div> 
 
    </div> 
 
\t <div class="caption"> 
 
\t <h3 class="text-center">Title</h3> 
 
    </div> 
 
    </a> 
 
</div> 
 
</div>

我希望這將幫助:)

來源

2017-01-09 18:32:24 homer

畫廊與標題的方形微型

PREVIOUSLY

回答

相關問題