0

I finally give up my previous idea... I tried with table but seems to be hard too. I have another idea: A squared div containing:

  • the text at the bottom (no percentage) certainly with: position:absolute;bottom:0;
  • the miniature img-responsive at the top of caption vertically/horizontally centered (maybe display:table-cell; can help)

I often see solutions with a predefining widht (e.g 30% or so) but I want this to adapt to any width (because they will be different depending of the screen size)

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

PREVIOUSLY

It's been 3 hours that I'm trying to get what I want, but impossible (checked stackoverflow, bootstrap options, jsfiddle, w3schools and others...)

My problem look somehow simple:

The goal is to get a formatted gallery.

I explain my self: Each "thumbnail" (bootstrap's one) need to be square and contain:

  • the thumbnail (max 70% of height, 100% width, vertically and horizontally centered) and need to be fill width or height
  • the Title under (30% left, vertically and horizontally centered)

As an image is better than long text I created a Paint Example

I represented 3 column, but the idea is to get as much as i need in a row

I tried to:

  • Use a table
  • Modify This (because the title isn't vertically-centered in the 30%
  • A hack to center but it doesn't work when height is not a px value (can't post more than 2 links)
  • and a various other

As a note, I would like to use CSS only, and get Bootstrap on my website.

I hope you understand my problem, and will help me to solve this.

Using the comment below, my code now looks:

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

This works nicely, but vertical image aren't resized correctly. Please give me a hack to allow this (add max-height:100%; doesn't work"

Community
  • 1
  • 1
homer
  • 882
  • 8
  • 23
  • I've found a working part of my solution [here](http://stackoverflow.com/questions/31862091/create-a-perfect-square-div-responsive) – homer Dec 19 '16 at 15:52

1 Answers1

0

Finally I got my answer, maybe not optimal but this works:

.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;
}
<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">
 <div class="outer">
   <img src="http://placehold.it/350x150" class="img-responsive">
 </div>
  </div>
 <div class="caption">
   <h3 class="text-center">Title</h3>
 </div>
  </a>
</div>
<div class="col-xs-3">
  <a href="#" class="thumbnail">
  <div class="image">
 <div class="outer">
   <img src="http://placehold.it/150x350" class="img-responsive">
 </div>
  </div>
 <div class="caption">
   <h3 class="text-center">Title</h3>
    </div>
  </a>
</div>
</div>

I hope this will help :)

homer
  • 882
  • 8
  • 23