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

Posted 2023-03-25

【中文标题】使用 CSS 使 GIF 大小适应浏览器窗口尺寸

【英文标题】：Adapting GIF size to browser window dimensions using CSS

【发布时间】：2021-04-21 13:14:34

【问题描述】：

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

html 结束

<a href="#" class="image"><img src="myimage.gif"  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

【参考方案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%;