使用灵活的图像背景更新了重新设计

Question

我需要在Photoshop中剪切图像并重新构图。我想创建一个table / div-table，放置分区图像的片段。

我做到了：

<div id="Table">
    <div id="row">
        <div id="col">
            <img src="01.png" alt="">
        </div>
        <div id="col">
            <img src="02.png" alt="">
        </div>
        <div id="col">
            <img src="03.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="04.png" alt="">
        </div>
        <div id="col">
            <img src="05.png" alt="">
        </div>
        <div id="col">
            <img src="06.png" alt="">
        </div>
    </div>
    <div id="row">
        <div id="col">
            <img src="07.png" alt="">
        </div>
        <div id="col">
            <img src="08.png" alt="">
        </div>
        <div id="col">
            <img src="09.png" alt="">
        </div>
    </div>
</div>

使用Css：

<style type="text/css">
<!--
img {
    width: 100%;
    height: auto;
}

#Table {
    display: table;
    width: 50%;
}
#row {
    display: table-row;
}

#col {
    display:table-cell;
}

-->
</style>

更新

我必须在中间（img 5）添加一个包含物品，数量和价格的表格。我已经更新了小提琴。小提琴中有一些问题，但这里有与我的页面截图的链接。

https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0

的jsfiddle： http://jsfiddle.net/wdb5gq29/43/

Answer 1

添加display: block并从您的img标记中删除width以摆脱cellspacing：

img {
    display: block;
    height: auto;
}

更新小提琴：http://jsfiddle.net/wdb5gq29/42/

Answer 2

我正在开发一个类似的项目（响应式图像地图），我发现放置在单个图像上的定位div更加稳定。

它具有被用作图像映射的附加优势，因为您可以将内容放入或添加9个div的功能，使用更多或更少的div，并且没有对齐问题，因为它使用一个图像而不是多个切片图片。一个很棒的例子是CSS Play的响应式图像地图：http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html

以下是与您类似的示例代码。

JSFiddle

HTML

<div id="wrapper">

<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>

</div>

（注意：CSS以长篇形式写出，以便于使用。通过组合相似的样式，可以在现场网站上缩短CSS。）

html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}

#wrapper {
height:100%;
width:100%;
}

.image-holder {
width:50%;
position:relative;
}

.image-background {
width:100%;
display:block;
}

.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}

#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}

请记住添加！DOCTYPE html或IE会有问题。此外，div宽度设置为33％，边框用于突出显示结构。在实时版本中，您将删除边框并尝试将水平div设置为33.333％，等于100％。或33％34％33％。

对于原始CSS表格布局，您可以添加以下附加CSS来稳定表格并删除图像下的默认底部间隙，并且它在Firefox和资源管理器中有效，但在其他浏览器中显示奇怪的间隙或对齐问题在不同的屏幕尺寸。

.table {
display:table;
width:50%;
margin:0;
padding:0;  
border-width:0;
border-style:none;
border-collapse:collapse;                           
}

.col {
display:table-cell;
border:none;
}

.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}

使用灵活的图像背景更新了重新设计

根据您最新的小提琴，看起来您想要显示数据表，打印机图像作为背景。下面的JSFiddle示例有一个灵活的容器div设置为请求的50％。在容器中是数据表，以及可以缩放的绝对定位的打印机图像，并用作背景。

JSFiddle

.price-container {
    position:relative;    
    padding:0;
    display:table;
    width:50%;
}

.image-bg {
    display:block;
    position:absolute;
    top:0;
    left:0;
    min-height:100%;
/*  min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:-1;
}

.table-holder {
    z-index:2;
    padding:2em;
/*  min-width:300px;   */
}

.printer-display-table {
    width:100%;
    padding:0;
    border-width:0;
    border-style:none;
    border-collapse:collapse;
    font-family:verdana;
    font-size:.6em;
}

.printer-display-table td {
    border:solid 1px #000000;
    padding:.5em;
}

HTML

<div class="price-container">    

<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />

<div class="table-holder">   
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>

</div>

分区图像在表中

更新

2 个答案:

使用灵活的图像背景更新了重新设计