Как сделать чтобы все картинки были одного размера?

Question

[squirtazzer]

Пока картинки были прямоугольные проблем не было,но после добавления вертикальных картинок страница стала кривой.
Подскажите что внести в ксс, чтобы все картинки были одного размера. Спасибо
dgsite.ru/portfolio

Answer 1

[Stalker_darkway]

Картинки разные, если вертикальные сделать одного размера с горизонтальными, то будет смотреться коряво.
Вложеннность таблицы странная и нафиг не нужная. Нужно table->table-row->table-cell, а не table->table-cell. Я бы на вашем месте переработал структуру.

Comments

[squirtazzer]

Дело в том что это шаблон такой,и как там что менять я к сожалению не знаю.

[Stalker_darkway]

В style.css на строке 1570 уберите float: left, меняйте картинки(поставьте одинаковые размеры если с помощью css не умеете). Ну и подкорректируйте размеры списков, чтобы аккуратно смотрелось.

[Олег Аксенов]

Думаю можно ему в css задать значения max высоты и ширины для div картинок, а потом пусть вставляет большие себе

[squirtazzer]

Олег Аксенов: я пробовал через файербагс,правил макс видт,толку не было.мне бы сделать картинки ВСЕ прямоугольные ,пусть обрезаются,а при клике раскрывались бы на полный размер.но я не знаю как это сделать(

[Stalker_darkway]

Вам реально проще обрезать большие картинки примерно до 120px в высоту. Дальше сделать как я советовал и убрать float: left;
Если же вы все таки хотите чтобы картинки обрезались, то задайте для li высоту 120px и укажите overflow: hidden;

[squirtazzer]

Вячеслав: как обрезать?пожалуйста напишите какой код надо вставить в ксс?я ну вообще в этом дуб дубом

[Stalker_darkway]

#porfolio li{
height: 240px;
overflow: hidden;
}

#porfolio li img{
width: 100%;
height: auto;
}

Это надо вставить в файл css в корне вашего шаблона. И убрать float: left на строке 1570.

[Stalker_darkway]

файл называется style.css

Answer 2

[Олег Аксенов]

Попробуйте

.element
{
    overflow:hidden;
    width:300px;
    height: 300px;
    margin: 5px;
    float: left;
    
    position: relative;
}

.element img
{
   position: absolute;
   top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

Comments

[squirtazzer]

вснес в самый

[squirtazzer]

ксс,не помогло,ничего не поменялось почему то.

[Stalker_darkway]

squirtazzer: потому что надо писать не .element, а #portfolio li

[squirtazzer]

Вячеслав: спасибо большое все четко!