javascript - 图片未在 chrome 中加载

Question

对于我正在做的一个小元素，我正在使用 css3 列数创建一个砖石风格的图片板。这完美地工作并创建了我想要使用的 4 列。

我的问题是填充卡片的图像仅呈现在第一列中。在其余部分，它们是他们的，如果我单击并拖动或右键单击它会提供图像 url/缩略图。在 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

尝试从 .card 类中移除 overflow: hidden

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