В режиме причуд можно ли изменить размер img в ячейке содержащей их таблицы? - PullRequest
Новая
       38

В режиме причуд можно ли изменить размер img в ячейке содержащей их таблицы?

0 голосов
/ 14 марта 2011

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

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

Проблема в том, что изображения не уменьшаются в размерах, они остаются в своем первоначальном размере, как бы я ни делал. Тогда таблица не придерживается установленного размера, она была изменена, чтобы вместить все изображения. В стандартном режиме я считаю, что «ширина: 100%» на изображении становится ближе к тому, чего я хочу достичь.

Я рассматриваю решение javascript, которое зацикливается на каждом изображении, вычисляя его размер и изменяя размер вручную. Но это, вероятно, вызовет некоторое время загрузки при запуске, что не идеально.

Edit:

Я написал базовый пример на JSBin . Чего я хочу добиться, так это уметь устанавливать размер таблицы и изменять размеры изображений, независимо от того, растут они или уменьшаются до размера их ячейки.

4-я версия jsbin использует фиктивные изображения.

Ответы [ 2 ]

2 голосов
/ 14 марта 2011

Я думаю Я решил это.

Я тестировал эту демонстрацию в Chrome, Firefox, Internet Explorer, Safari, Opera;все они отображаются последовательно.

  • Мне пришлось добавить оболочку div в каждую ячейку.Я знаю, что это не круто, но это нужно было сделать, чтобы он работал в Chrome.
  • Я добавил table-layout: fixed, чтобы он работал в Internet Explorer.

Демонстрация в реальном времени

CSS: 

#mycontainer {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
#mytable {
    height: 50%;
    width: 50%;
    table-layout: fixed;
}
#mytable div {
    width: 100%;
    height: 100%;
}
#mytable img {
    width: 100%;
    height: 100%;
}

HTML: 

<div id="mycontainer">
    <table id="mytable" cellpadding="0" cellspacing="0">
        <tr>
            <td><div><img src="http://dummyimage.com/28x28/000/fff.png&text=Dummy" /></div></td>
            ...
        </tr>
        ...
    </table>
</div>
0 голосов
/ 14 марта 2011

Я решил свою проблему с помощью JavaScript.Я не мог найти способ заставить все браузеры играть хорошо, не заставляя их.

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

...