изображение не помещается ячейка таблицы

Я хочу построить страницу, которая имеет конструкцию, как в рисунке:изображение не помещается ячейка таблицы

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>

Но изображение в левом не расширяется, чтобы вместить все ячейки таблицы ...

Я не знаю, если Я мог бы достичь этого, используя divs или как.

источник

2014-09-09 landi

Ваша проблема заключается в размере вашего изображения, которое называется «not-included.jpg». Если вы устанавливаете высоту в auto, она пропорциональна ширине. Так, как у вас были настроенные столбцы, он не заполнялся бы вертикально. – Aibrean

Просто FYI, '' colspan = "3" 'вашей левой ячейки бесполезен, так как он занимает все три строки, он не охватывает какой-либо столбец. Вы можете удалить его. – LcSalazar

Опция будет использовать фоновое изображение вместо:

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

источник

2014-09-09 14:24:58

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 ячейки таблицы в вопросе зависит от вашего образа и как вы хотите, чтобы она выглядела. Лично я бы сделал это с помощью divs вместо таблицы, но я предполагаю, что для вашего проекта требуется таблица.

источник

2014-09-09 14:28:28 Candlejack

изображение не помещается ячейка таблицы

ответ

Смежные вопросы