使用 CSS 使 GIF 大小适应浏览器窗口尺寸答案

【问题标题】：Adapting GIF size to browser window dimensions using CSS使用 CSS 使 GIF 大小适应浏览器窗口尺寸
【发布时间】：2021-04-21 13:14:34
【问题描述】：

我想在网站中嵌入一个 GIF，以便它改变大小以适应不同的浏览器窗口大小。以下代码在 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>

这是类的 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%;
            }

【问题讨论】：

也许你可以用你的实际图像进行演示？
@Paulie_D 任何动画 gif 都存在问题。例如：media.giphy.com/media/olAik8MhYOB9K/giphy.gif

标签： html css gif

【解决方案1】：

您可以做到这一点的一种方法是在您的容器/父标签上添加一些宽度和高度（在“.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%;

}

【讨论】：