野生动物园中的图像高度

Question

我对 safari 中的某些图像有疑问。它无处不在，但不适用于野生动物园。我的网站上有一些图片，但在 safari 中，图片的数量越来越多。

网站是development.mar-bakker.nl

<div class="col-xs-12 col-sm-4 col-md-4">
                <div class="grid wow zoomIn">
                    <figure class="effect-bubba">
                        <img src="assets/images/item-2.jpg" class="img-responsive" alt="img01"/>
                        <figcaption>
                            <h2>Webshop <span>PC4U</span></h2>
                            <p>Lily likes to play with crayons and pencils</p>
                        </figcaption>           
                    </figure>
                </div>

            </div>

而 css 是这样的：

    figure.effect-bubba {
    background: #9e5406;
}
figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 10%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
    color: #fff;
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

谁能帮帮我。

Answer 1

尝试删除 .grid 图 img 选择器中的 max-width 和 min-height 定义

.grid figure img { position: relative; display: block; /* min-height: 100%; */ /* max-width: 100%; */ opacity: 0.8; }

Answer 2

我发现错误了！它是由不同的 css 元素

   .grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

野生动物园中的图像高度

Image height in safari

html

css

safari