未在Chrome中加载图片

Question

对于我正在做的一个小项目，我正在使用css3列数创建砌体样式的css3 。 这可以完美地工作并创建我要使用的4列。

我的问题是，填充卡片的图像仅在第一列中呈现。 在其他情况下，它们是它们的属性，如果我click并drag或右键单击，它将提供图像url / thumbnail 。 在firefox和internet explorer它可以正确渲染，并且图像显示在每一列中，而不是在chrome上。

我的图片的html如下：

<div class="col s12 masonry">
    <div class="masonryItem card" ng-repeat="photo in RecentPhotos">

        <div class="card-image">
            <img ng-src="Assets/images/Photos/{{photo.fileName}}">
            <span class="card-title" ng-hide="photo.editing">{{photo.name}}</span>
            <input class="card-title" title="Title" type="text" ng-model="photo.name" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-content">
            <p ng-hide="photo.editing">
                {{photo.description}}
            </p>
            <input title="Description" type="text" ng-model="photo.description" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-action">
            <a href="" ng-click="editPhoto(photo)">Edit</a>
        </div>

    </div>
</div>

masonry类的css如下：

.masonry {
 /* Masonry container */
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-gap: 1em;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-fill: auto;
    -moz-column-fill: auto;
    -webkit-column-fill: auto;
}

.masonryItem {
 /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

不幸的是，我无法在此处上传屏幕截图，因此无法向您显示我的实际网站，但是此JSfiddle

演示问题。 尽管实际上没有图像，但您可以看到第一列具有“残破的图像”链接，但其余的列却没有链接。

Answer 1

尝试消除overflow: hidden .card类overflow: hidden

.card {
    position: relative;
    /* overflow: hidden; */
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    transition: box-shadow .25s;
    border-radius: 2px; 
}