css - 造型图和图标题

Question

我想知道是否以及如何使用我已有的当前 html/css 在 css/html 中实现以下外观:

我想要第一个(红色):/image/tcnVx.jpg

-我有第二个(蓝色)/第三个(绿色)工作 -我希望img(紫色F)跨越该部分的整个宽度，也有一定的高度(部分高度的80％)。让图像像图像中一样填充这个空间

-我希望该图片可点击(打开灯箱)

-figcaption 有文本，应该是部分高度的 20%(这总计为 100%)并且居中(可能是我可以管理的行高，哈哈..)

到目前为止我的代码:

<section>
<article class="graphic">
    <figure>
        <img src="img/Graphic/final.png" alt="Image for graphic work">
        <figcaption>Final logo</figcaption>
    </figure>
</article>

<article class="web">
    <figure>
        <img src="img/Web/obbycmsmockup.png" alt="Image for web work">
        <figcaption>CMS webdesign for OBBYCMS</figcaption>
    </figure>
</article>  

<article class="misc">
    <figure>
        <img src="img/Misc/ww4.jpg" alt="Image for other work">
        <figcaption>Graphic work for WhiteWizard</figcaption>
    </figure>
</article>

Answer 1

我认为这就是您想要实现的目标。设置图形、图像和图形标题的样式。

*{
    box-sizing:border-box;
}
article {
    width:200px;
    height:200px;
    float:left;
    margin:10px;
    color:#FFF;
}
.web {
    background:green
}
.misc {
    background:blue
}
.graphic figure{
    width:100%;
    height:100%;
    margin:0;
    background:#FFF;
}
.graphic figcaption{
    background:#F00;
    color:#FFF;
    width:100%;
    height:20%;
    text-align:center;
    padding:5px;
}
.graphic img {
    width:100%;
    height:80%;
}
.web img, .misc img {
    background:#FFF;
    width:100%;
    height:40%;
}

<article class="graphic">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for graphic work">
        <figcaption>Final logo</figcaption>
    </figure>
</article>
<article class="web">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for web work">
        <figcaption>CMS webdesign for OBBYCMS</figcaption>
    </figure>
</article>
<article class="misc">
    <figure>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" alt="Image for other work">
        <figcaption>Graphic work for WhiteWizard</figcaption>
    </figure>
</article>

如果您还需要其他内容，请评论。如果有帮助，+1。