在畫廊中將所有縮略圖製作成相同大小

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然而，保證金的權利不會受到影響，如果我將它們設爲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>中的圖像作爲<a>的background-image。並刪除<figure>的width: 150px;。看看這個Codepen

像：

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> 

希望這有助於！