2013-03-20 2 views
3

Как заставить изображения переполняться в ячейках таблицы без расширения ячеек?Форсировать изображения для переполнения в ячейках таблицы

EDIT:

К сожалению, я предоставлю больше информации. Это таблица:

<table class="content"> 
    <col width="200px" /> 
    <col width="560px" /> 
    <col width="200px" /> 
    <tr> 
     <td colspan="3" class="logo"></td> 
    </tr> 
</table> 

CSS:

.logo 
{ 
    height: 120px; 
    background: url('img/wallpaper.png') center; 
} 

Я думал, что будет простое решение ...

+2

* Очень низкое качество: * Что вы пробовали? Где ваш код? –

+1

Ну, я пробовал вложенные таблицы с таблицами, которые работают, но я хотел бы знать, как заставить изображения переполняться. – Stylock

ответ

3

Если вы используете <img> тег вместо фонового изображения, вы можете удалить его из потока документа с position: absolute;

HTML

<td class="logo"> 
    <img src="img/wallpaper.png"> 
</td> 

Css

.logo img { 
    position: absolute; 
} 

Этот будет пропускать изображение в ячейку, но создает другие побочные эффекты, с которыми вам придется иметь дело. Обновите верхнюю или нижнюю часть, чтобы сохранить изображение на месте.

Скорректированный CSS

.logo img { 
    position: absolute; 
    top: 15px; 
} 

Заканчивать http://jsfiddle.net/QMNRp/1/

+0

Это отлично работает, но создает x-scroll, который мне не нужен. Я действительно понял, что мне, вероятно, нужно будет прикрепить изображение логотипа к обоям. Я пытаюсь расширить изображение логотипа в x направлении без создания x-scroll и т. Д. – Stylock

-1

Set Static Ширина в ТД и установите overflow в visible и text-wrap:nowrap; или word-break до keep all для текста в таблицах

td{ 
width:100px; 
max-width:100px; 
overflow:visible 
text-wrap:nowrap; //for text 
word-break:keep-all; // for text 
} 
+0

@xec, пожалуйста, проверьте время ответа по сравнению с редактированием вопроса. Доводя ответ, потому что он больше не применяется ** после ** вопрос был отредактирован довольно несправедливо. –

+0

@JamesDonnelly Вы правы, я бы удалил нижний план, за исключением того, что этот ответ не помог бы предотвратить растягивание ячейки таблицы, фоновое изображение или иное. – xec

+0

@xec Просто для справки это * будет * работать для переполнения ширины, но не по высоте: http://jsfiddle.net/erKGm/ –

1

Вы просите элемент background, чтобы выйти на передний план. Это невозможно. Фон элемента может быть таким же большим, как и сам элемент.

Чтобы сделать изображение .logo той же размерностью, что и содержательная ячейка, вы можете использовать background-size property, но это isn't supported в более старых версиях.

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