создание всех миниатюр одинакового размера в галерее

Question

Любая идея, почему я не могу изменить размер миниатюр? Я хочу, чтобы они все быть такими же:

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

полный код: https://gist.github.com/monajalal/3dace3489e20e0aeeba5351a7987065a Это то, что я вижу:

Я использую это: http://codepen.io/dimsemenov/pen/ZYbPJM

Обновление: Я изменил CSS однако margin-right не пострадает, и если я сделаю их 200x200, то не будет никакого поля. Почему это?

.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; 
} 

Answer 1

Вместо назначения ширины/высоты вашей фигуре присвойте ее изображению.

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

Вырабатывает дисплей так:

Answer 2

Вы устанавливаете их все к той же ширины, а потому, что их размеры различны, они будут иметь разную высоту. Если вы хотите, чтобы они были одинаковой высоты, либо обрезайте их до одинаковых размеров, либо деформируйте их, установив высоту. Ваш текущий height: auto просто сохраняет свои размеры.

By the way, nice banana. 

Answer 3

Вы можете сделать что-то вроде этого,

... 

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

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

Примечание: - Но это будет обрезать изображение справа. Итак, это решение, которое вы должны сделать, как вы этого хотите.

Answer 4

Вы можете использовать изображения внутри <a> как background-image от <a>. И удаление width: 150px; из <figure>. Посмотрите на этом 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> 

Надеется, что это помогает!