CODEWITHSUNDEEP
htmlcss
Mona Jalal
Mona Jalal

Reputation: 38155

making all the thumbnails the same size in a gallery

Any idea why I can't change the size of thumbnail photos? I want them all be the same:

 <h2>Book:</h2>

  <div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="imgur/book/2EuGD9S.jpg" itemprop="contentUrl" data-size="900x900">
          <img src="imgur/book/2EuGD9S.jpg" itemprop="thumbnail" alt="Image description" height="300" width="300" />
      </a>
                                          <figcaption itemprop="caption description">Image caption  1</figcaption>

    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="imgur/book/Cmg3qMt.jpg" itemprop="contentUrl" data-size="900x900">
          <img src="imgur/book/Cmg3qMt.jpg" itemprop="thumbnail" alt="Image description" data-size="300x300" />
      </a>
      <figcaption itemprop="caption description">Image caption 2</figcaption>
    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="imgur/book/DyvInMR.jpg" itemprop="contentUrl" data-size="900x900">
          <img src="imgur/book/DyvInMR.jpg" itemprop="thumbnail" alt="Image description" data-size="300x300" />
      </a>
      <figcaption itemprop="caption description">Image caption 3</figcaption>
    </figure>



  </div>

complete code: https://gist.github.com/monajalal/3dace3489e20e0aeeba5351a7987065a This is what I see: enter image description here

I am using this: http://codepen.io/dimsemenov/pen/ZYbPJM

Update: I changed the CSS however margin-right doesn't get affected and if I make them 200x200 there will be no margin. Why is that? enter image description here

.my-gallery {
  width: 100%;
  float: left;
}
/*
.my-gallery img {
  width: 100%;
  height: auto;
}
*/

.my-gallery img {
  height: 150px;
  width: 150px;
  margin-right: 10px;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}

Upvotes: 0

Views: 704

Answers (4)

haltersweb
haltersweb

Reputation: 3139

Instead of assigning a width/height to your figure, assign it to the image.

.my-gallery img {
  width: 200px;
  height: 200px;
  display: block;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
}

Yields the display like this: enter image description here

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can use the images inside of <a> as a background-image of <a>. And removing the width: 150px; of <figure>. Have a look at this Codepen

Like:

CSS:

figure a {
  display: block;
  width: 150px;
  height: 150px;
  border: 10px solid #fff;
  background-size: cover;
}

HTML:

<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
  <a href="https://farm3.staticflickr.com/2567/5697107145_a4c2eaa0cd_o.jpg" itemprop="contentUrl" data-size="1024x1024" style="background-image: url('https://farm3.staticflickr.com/2567/5697107145_3c27ff3cd1_m.jpg')">
  </a>
  <figcaption itemprop="caption description">Image caption  1</figcaption>  
</figure>

Hope this helps!

Upvotes: 1

Jerad Rutnam
Jerad Rutnam

Reputation: 1546

You can do something like this,

...

.my-gallery img {
  ...
  width: 100%;
  min-height: 100%;
}

.my-gallery figure {
  ...
  overflow: hidden;
  width: 200px;
  height: 200px;
}
...

Note:- But this will crop the image on right. So that is the decision you have to make how you want it.

Upvotes: 0

kzhao14
kzhao14

Reputation: 2630

You're setting them all to the same width, but because their dimensions are different, they will have different heights. If you want them to be the same height, either crop them to the same dimensions, or warp them by setting a height. Your current height: auto just keeps their same dimensions.

By the way, nice banana.

Upvotes: 0

Related Questions