造型人物和形象说明

Question

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

我想要第一个（红色）：http://i.stack.imgur.com/tcnVx.jpg

-我有第二个（蓝色）/第三个（绿色）工作 -我希望 img（紫色 F）跨越整个部分的宽度，也有一定的高度（部分高度的 80%）。让图像像图像

一样填充这个space

-我希望 img 可以点击（打开灯箱）

-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.

Answer 2

对于结构

上面的 Vann'Tile lanito 代码很好。只需要将所有元素放在父容器中

eg: <div class="container"><--all element inside this--></div>

CSS:

**.container{
width: 100%;
background: grey
}**

对于灯箱

使 img 可点击（打开灯箱）。您必须使用 jQuery 来执行此操作。你不能为灯箱使用这样的插件：-

Fancybox

lightbox2等

如果您正在寻找响应式灯箱：

Lightbox/Responsive

Dimsemenov plugins等

造型人物和形象说明

styling figure & figcaption

css

image

styling