html - 尺寸调整的 CSS 放在哪里？在 li、a 或 img 中？

Question

我正在制作一个移动网络应用程序，我遇到了这个问题。

目前我的代码结构如下:

    <ul class="app-lst">
        <li class="item-1">
            <a href="#">
                <img src="img1.jpg" alt="img">
            </a>
        </li>
        <li class="item-2">
            <a href="#">
                <img src="img2.jpg" alt="img">
            </a>
        </li>
... etc.
    </ul>


CSS:
.item-1 {
    width: 90%;
    height: 10%;
}

.app-lst li a {
    background-color: red;
}

.app-lst li a img {
}

下图是我想要得到的结果。从上面的代码可以看出，每个盒子都是<li> ，在它下面，有<a>链接下方是内容。

我将如何为 CSS 处理这个问题？

-我是否应该通过在 <li> 上设置宽度和高度来调整框的大小？或 <a> ？

-我是否应该通过将背景颜色放在 <a> 上来设置框的颜色？ ？

-最后，图像无法调整以适应父级 <a> ，因此如果图像较大，它会扩展整个框。我尝试在图像上放置“max-width: 100%”，但没有成功。

此外，由于它是移动设计，我用百分比控制所有尺寸。这是一个好的做法还是我应该用像素来做？

非常感谢您的帮助!

Answer 1

您需要使用您的 <ul>作为设置为 100% 高度/宽度的容器，然后调整 <li> 的大小基于此的元素。最后，让你的 <img>元素 100% 高度和宽度。

HTML

<ul class="app-lst">
    <li class="item-1">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-2">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-3">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-4">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
    <li class="item-5">
        <a href="#">
            <img src="http://placehold.it/150x150" alt="img"/>
        </a>
    </li>
</ul>

CSS

.app-lst {
    display: block;
    height: 500px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.app-lst li {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
}

.item-1, .item-2 {
    height: 75%;
}

.item-1 {
    width: 75%;
}

.item-2 {
    width: 25%;
}

.item-3, .item-4, .item-5 {
    height: 25%;
}

.item-3 {
    width: 10%;
}

.item-4 {
    width: 20%;
}

.item-5 {
    width: 70%;
}

.app-lst li img {
    height: 100%;
    width: 100%;
}

JSFiddle:http://jsfiddle.net/b6x1byfp/