Question

嗨我的页面顶部有一堆图像链接，它们让我有些悲伤。基于百分比，媒体查询中的图像大小调整浏览器大小和屏幕分辨率。但是，图像在浏览器调整大小或设备屏幕res上越小，每个图像之间的差距就越大。

有什么想法吗？

我尝试了font-size:0;，但它没有做任何事情

CSS ：

.top_grow {
    display:inline-block;
    vertical-align:top;
    font-size:0;
    .top_grow img:hover {
        border: 2px solid #fff
    }
    .top_grow .text {
        font-size: 11px;
        letter-spacing: 1px;
        word-spacing: 1px;
    }
    .cats {
        width: 100%;
        height: 100%;
    }
}

HTML ：

<div class="top_grow">
            <a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
                <img class="cats" src="test/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
                <div class="text">
                    Mario Galaxy`
            </div>
        </a>
    </div>

    <div class="top_grow">
        <a href="http://www.techagesite.com/free-music-wallpaper-big-music-wallpapers.htm">
            <img class="cats" src="test/Equalizer-music-wallpaper-music-bars-wallpapers_small1.jpg"></img>
            <div class="text">
                Music
            </div>
        </a>
    </div>

    <div class="top_grow">
        <a href="http://www.techagesite.com/cod7-call-of-duty-black-ops-wallpapers-7.htm">
            <img class="cats" src="test/cod7-call-of-duty-black-ops-background-7_small1.jpg"></img>
            <div class="text">
                Black Ops
            </div>
        </a>
    </div>

    <div class="top_grow">
        <a href="scooby-doo-wallpapers-character-backgrounds-coloring-pages-the-gang.htm">
            <img class="cats" src="test/scooby-doo-wallpaper-scary-cartoon-background-1024x768_small1.jpg"></img>
            <div class="text">
                Scooby Doo
            </div>
        </a>
    </div>

    <div class="top_grow">
        <a href="free-hd-neon-colours-desktop-wallpapers-download.htm">
            <img class="cats" src="test/bright-abtsract-glow-hd-wallpaper-1920x1080-hd_small1.jpg"></img>
            <div class="text">
                Neon Desktop
            </div>
        </a>
    </div>

    <div class="top_grow">
        <a href="funny-wallpaper-pics-quotes-photos-and-stuff.htm">
            <img class="cats" src="test/funny-wallpaper-pics-quotes-photos-and-stuff-cartoons_small.jpg"></img>
            <div class="text">
            Funny
            </div>
        </a>
    </div>

Answer 1

我已经在Firefox和Chrome中解密了你的代码，图像之间的距离总是一样的。无论如何，您的代码看起来无效 - 尝试解决验证错误 - 可能会解决您的问题。另外我认为你不能把一种风格定义放在另一种风格定义中。

其他建议 - 尝试使用display：block;浮动：左; on .top_grow元素。

随着图像缩小，图像之间的空间在浏览器调整大小时增长

1 个答案: