使用CSS调整GIF大小以适应浏览器窗口尺寸

Question

我想嵌入一个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%;
            }

Answer 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%;
}