Question

我想构建一个具有如下图所示设计的页面：

enter image description here

因此，在显示 img 字词的位置，有一个图像应该适合该区域。并且下面的文字不应该高于左侧的图像。

我尝试使用像这样的表

来构建它

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
table { max-width: 100%; }
table, th, td { border-collapse: collapse;}
td img { width: 100%; max-width: 100%; height: auto;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing='0' nowrap valign="baseline" border="0" style="width:100%; height:100%;">
    <tbody>
        <tr>    
            <td rowspan="3" colspan="3"><img src="http://www.si-faosmanlisabunlari.com/wp-content/uploads/not_included.jpg"/></td>  
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
        </tr>
        <tr>
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
            <td><img src="http://www.fxebay.de/img/gallery/fullsize/400x600.gif" /></td>    
        </tr>
        <tr>
            <td colspan="5">
                <h3>Collezione UOMO FALLWINTER 14/15</h3>
                Non rinuncia all’eleganza l’uomo DUNO, ma lo fa consapevole d’indossare un brand che è la nuova origine del vestire giovane. La linea uomo di DUNO per questa stagione è caratterizzata da capispalla, piumini e giacconi dallo stile inconfondibile. Comodi e dalla grande portabilità in ogni contesto, dall’evento speciale ai tour outdoor, i capi DUNO sono un alleato raffinato e solido.
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

但是左边的图像并没有扩展到适合所有的表格单元格......

我不知道我是否可以使用div或如何实现这一目标。

Answer 1

一个选项是改为使用背景图片：

background:url('not_included.jpg') center no-repeat;
background-size:cover;
width:300px;

Answer 2

JSFIDDLE

我将图像从表中取出，然后使用CSS将其添加为背景图像。这使您可以访问后台操作选项，例如background-size。

表格单元格：

<td rowspan="3" colspan="3" class='cellWithBG'>
   <p>&nbsp;</p>               
</td>

CSS：

.cellWithBG { 
      background-image:url('http://www.si-faosmanlisabunlari.com/wp-content/uploads/not_included.jpg'); 
      background-size:cover; 
      background-repeat: no-repeat; 
      min-width:200px;
}

相关表格单元格的min-width取决于您的图片以及您希望它的外观。我个人会用div而不是表来做这个，但我假设你的项目需要一个表。

图像不适合表格单元格

2 个答案: