less里的问题

Question

在less里设置img的宽度 怎么设置不上去呢，求大神看看

ul {
    list-style: none;
    float: left;
    width: 50%;
    li{
        
    }
    a {  
        width: 50%;
        display: inline-block;
        img {
            width: 50%;
            vertical-align: bottom;
        }
    }
}

上面是less里的样式下面的是在HTML文件 里的

<main>
            <ul>
                <li>
                    <a href="">
                        <img src="image/tc-1.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="image/tc-2.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="image/tc-3.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="image/tc-4.jpg" alt="" />
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="image/tc-5.jpg" alt="" />
                    </a>
                </li>
            </ul>
        </main>

Answer 1

因为你设置的是50%，要参照父级的宽度，而父级也是50%...以此类推，直到找到一个确切的宽度。而在以上的代码中你并没有定义明确的宽度。