使用 CSS 使 GIF 大小适应浏览器 window 尺寸

Question

我想在网站中嵌入 GIF，以便它改变大小以适应不同的浏览器 window 大小。以下代码在 src = .jpg 时有效，但当我使用 src=.gif 时代码中断。如何调整此代码以使用 GIF？

这里是HTML结尾

<a href="#" class="image"><img src="myimage.gif" alt="" data-position="25% 25%" /></a>
                            <div class="content">
                                <div class="inner">
                                    <h2>Title here</h2>
                                    <p>Description here.</p>
                                    <ul class="actions">
                                    </ul>
                                </div>
                            </div>

这是 class

的 CSS 结尾

/* Image */

    .image {
        border-radius: 0.25em;
        border: 0;
        display: inline-block;
        position: relative;
    }

        .image img {
            border-radius: 0.25em;
            display: block;
        }

        .image.left, .image.right {
            max-width: 40%;
        }

            .image.left img, .image.right img {
                width: 100%;
            }

        .image.left {
            float: left;
            margin: 0 1.5em 1em 0;
            top: 0.25em;
        }

        .image.right {
            float: right;
            margin: 0 0 1em 1.5em;
            top: 0.25em;
        }

        .image.fit {
            display: block;
            margin: 0 0 2em 0;
            width: 100%;
        }

            .image.fit img {
                width: 100%;
            }

        .image.main {
            display: block;
            margin: 0 0 3em 0;
            width: 100%;
        }

            .image.main img {
                width: 100%;
            }

Answer 1

您可以这样做的一种方法是在您的 container/parent 标签上添加一些宽度和高度（在“.image”的情况下），然后将容器内的 img 大小调整为其父元素的 100% :

.image {
    border-radius: 0.25em;
    border: 0;
    display: inline-block;
    position: relative;

    width: 40vw;
    height: 30vh;

    overflow:hidden;
}
.image img {
    display: block;
    
    width: 100%;
    height: 100%;

}

使用 CSS 使 GIF 大小适应浏览器 window 尺寸

Adapting GIF size to browser window dimensions using CSS

html

css

gif