PREVIOUSLY

Question

我终于放弃了我以前的想法......我尝试过桌子，但似乎也很难。我有另一个想法：一个平方div包含：

底部的文字（无百分比）肯定与：position:absolute;bottom:0;
标题顶部垂直/水平居中的微型img-responsive（也许display:table-cell;可以提供帮助）

我经常看到具有预定义宽度的解决方案（例如30％左右），但我希望这能适应任何宽度（因为根据屏幕尺寸它们会有所不同）

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

PREVIOUSLY

我已经花了3个小时试图得到我想要的东西，但是不可能（检查stackoverflow，bootstrap选项，jsfiddle，w3schools和其他......）

我的问题看起来很简单：

目标是获得格式化的图库。

我解释自己：每个＆＃34;缩略图＆＃34; （bootstrap＆＃39;）需要是正方形并包含：

缩略图（最大70％的高度，100％宽度，垂直和水平居中），需要填充宽度或高度
标题下（左侧30％，垂直和水平居中）

由于图像比长文本更好，我创建了一个Paint Example

我代表了3栏，但我的想法是连续得到我需要的

我试图：

使用表格
Modify This（因为标题不是以30％为中心垂直居中
黑客攻击中心但是当高度不是px值时它不起作用（不能发布超过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%;没有工作＆＃34;

Answer 1

最后我得到了答案，也许不是最佳的，但这有效：

＆＃13;

   public function invoice(Request $request, $id)
  {
    $ordered = $this->order
        ->find($id)
        ->with('orderDetails', 'orderDetails.product');

   return response()->json($ordered);
  }

＆＃13;

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:80%;
	height:100%;
    margin:0px;
}
.outer img{
	margin:auto;
}

.outer {
	width:100%;
	height:100%;
    position:absolute;
	display:flex;
}

＆＃13;

我希望这会有所帮助：）

画廊方形微缩与标题

PREVIOUSLY

1 个答案: