Подскажите как сделать картинки одного размера.

[yana33311]

Есть код

<link rel="stylesheet" href="http://ergodesign.biz/application/maxsite/templates/nic/css/style.css"><table><tr><td><a href="http://ergodesign.biz/uploads/grusha_arozo2.jpg"> <img src="http://ergodesign.biz/uploads/grusha_arozo2.jpg"></a> </td><td><a href="http://ergodesign.biz/uploads/grusha.jpg"> <img src="http://ergodesign.biz/uploads/grusha.jpg"></a></td><td><a href="http://ergodesign.biz/uploads/oreh_temnij2.jpg"> <img src="http://ergodesign.biz/uploads/oreh_temnij2.jpg"></a></td><td> <a href="http://ergodesign.biz/uploads/klen_vankuver1.jpg"> <img src="http://ergodesign.biz/uploads/klen_vankuver1.jpg"></a> </td><td><a href="http://ergodesign.biz/uploads/pepel.jpg"> <img src="http://ergodesign.biz/uploads/pepel.jpg"></a></td><td><a href="http://ergodesign.biz/uploads/sinij_pepel1.jpg"> <img src="http://ergodesign.biz/uploads/sinij_pepel1.jpg"></a></td></tr><tr><td>Груша Арозо</td> <td>Груша</td> <td>Темный Орех</td> <td>Береза Снежная</td> <td>Пепел</td> <td>Синий пепел - Дополнительный цвет</td></tr></table>

У меня получаются картинки все разного размера. Как сделать так чтобы подогнать их под один размер (уменьшить) и сделать ячейки одинакогового размера с указанным в коде стилем?

Edited January 17, 2014 by yana33311

[npofopr]

img {max-width: 100%; height: auto;}

[yana33311]

Все равно разного размера. Вот страница . В стиль добавляла

img {max-width: 100%; height: auto;}

но все равно картинки разного размера.

[Z1gnet]

как вы хотите картинки разного формате сделать одинаковыми??? вам подсказали как сделать что бы картинки не были шире родителя. http://prntscr.com/2kin21 вот как эти 2 картинки разной ориентации сделать одного размера? это невозможно только если не обрезать их под нужный формат или не растянуть, но при этом нарушатся пропорции и будет бред. http://prntscr.com/2kio6d размер одинаковый но выглядит убого. я бы вам предложил бы просто отцентрировать их по вертикали и горизонтали. вот так. http://prntscr.com/2kiq7a

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

[Zverushka]

Либо задать картинкам фиксированной размер и они исказятся - либо поставить фиксированный размер родителю картинки и включить overflow hidden  - и они будут просто обрезаться. Или обрезать их в фотошопе все под один размер - чтобы обрезание было в тему.

Edited January 18, 2014 by Zverushka

[yana33311]

как вы хотите картинки разного формате сделать одинаковыми??? вам подсказали как сделать что бы картинки не были шире родителя. http://prntscr.com/2kin21 вот как эти 2 картинки разной ориентации сделать одного размера? это невозможно только если не обрезать их под нужный формат или не растянуть, но при этом нарушатся пропорции и будет бред. http://prntscr.com/2kio6d размер одинаковый но выглядит убого. я бы вам предложил бы просто отцентрировать их по вертикали и горизонтали. вот так. http://prntscr.com/2kiq7a

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

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

Edited January 19, 2014 by yana33311

[w-themes]

В 17.01.2014 в 00:38, Z1gnet сказал:

как вы хотите картинки разного формате сделать одинаковыми??? вам подсказали как сделать что бы картинки не были шире родителя. http://prntscr.com/2kin21 вот как эти 2 картинки разной ориентации сделать одного размера? это невозможно только если не обрезать их под нужный формат или не растянуть, но при этом нарушатся пропорции и будет бред. http://prntscr.com/2kio6d размер одинаковый но выглядит убого. я бы вам предложил бы просто отцентрировать их по вертикали и горизонтали. вот так. http://prntscr.com/2kiq7a

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

)) Ты точно веб программист?)) 

Разметка:

<div class="imageWrap">

<div style="background: url(/img.jpg) no-repeat;"></div>

</div>

Стили:

.imageWrap {float: left; width: 100px; height: 100px; position: relative;}

.imageWrap > div {float: left; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover !important; background-position: center center;}

 

Просто клонируете для каждой картинки такую разметку и они все будут одного размера как вертикально, так и горизонтально, не теряя своего вида. 

[klierik]

8 часов назад, w-themes сказал:

)) Ты точно веб программист?)) 

Устное предупреждение за переход на личности. Тебя никто не заставляет отвечать в темах и делать ты этого не обязан. Пожалуйста — относись уважительно к участникам сообщества.

За одно, пожалуйста, пользуйся редактором и обрамляй код соответствующими тегами

[w-themes]

В 16.05.2016 в 06:50, klierik сказал:

Устное предупреждение за переход на личности. Тебя никто не заставляет отвечать в темах и делать ты этого не обязан. Пожалуйста — относись уважительно к участникам сообщества.

За одно, пожалуйста, пользуйся редактором и обрамляй код соответствующими тегами

Добрый день. Ни коем образом не хотел задеть чувства данного пользователя, просто исходя из его ответа 

 

В 19.01.2014 в 00:38, Z1gnet сказал:

это невозможно

решил убедиться. Ваш форум, ваши правила, больше не буду задавать вопросы с явным ответом. 

Спасибо за подсказки, буду обрамлять  

[andrey7287]

В 15.05.2016 в 22:30, w-themes сказал:

)) Ты точно веб программист?)) 

Разметка:

<div class="imageWrap">

<div style="background: url(/img.jpg) no-repeat;"></div>

</div>

Стили:

.imageWrap {float: left; width: 100px; height: 100px; position: relative;}

.imageWrap > div {float: left; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: cover !important; background-position: center center;}

Ну то что вы решили задачу, вас веб программистом тоже не делает. И судя по предложенному коду, верстальщиком тоже, уж извините.

[w-themes]

13 часа назад, andrey7287 сказал:

Ну то что вы решили задачу, вас веб программистом тоже не делает. И судя по предложенному коду, верстальщиком тоже, уж извините.

И это я еще перехожу на личности?)))) 

Подскажите пожалуйста, что в моем коде показалось для вас сомнительным? Буду очень рад адекватной критике.

[andrey7287]

Цитата

Подскажите пожалуйста, что в моем коде показалось для вас сомнительным?

Использование пустого дива в разметке. Флоат вместе с позиционированием. Неоправданное прим. стилей.