Html 图像不'；t形表单元_Html_Css_Responsive Design

Html 图像不'；t形表单元

html css responsive-design

Html 图像不'；t形表单元,html,css,responsive-design,Html,Css,Responsive Design,我想构建一个页面，该页面的设计如下图所示：因此，在显示imgword的地方，应该有一个适合该区域的图像。下面的文字不应高于左侧的图像我试着用这样一张桌子来做 <!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/

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

因此，在显示imgword的地方，应该有一个适合该区域的图像。下面的文字不应高于左侧的图像

我试着用这样一张桌子来做

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


无标题文件
表{最大宽度：100%；}
表，th，td{边界折叠：折叠；}
td img{宽度：100%；最大宽度：100%；高度：自动；}
大莫学院秋季冬季14/15
非rinuncia all'eleganza l'uomo DUNO，ma lo fa consapevole d'indossare联合国品牌cheèla nuova origine del vestire Giovan。在卡皮斯帕拉（capispalla）的舞台上，一条世界性的直线不受欢迎。在ogni竞赛中，我可以在户外的特别ai巡回赛中，在拉菲那和索里多的比赛中，我可以在大球场上表演。

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

我不知道是否可以使用divs或如何实现这一点。

一个选项是使用背景图像：

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

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

后台大小

表格单元格：

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