Действия над img в div'е

[savinzeek]

Добрый день.

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

display:table-cell;

vertical-align:middle;

text-align:center;

width:100px;

height:100px;

Большие врезаются в блок с помощью задания ширины(100px) для картинки и высоты блока(100px + overflow:hiddden).

Так как стоит ширина картинки, то маленькая картинка растягивается на всю ширину, а если убрать ограничение по ширине, то большая картинка растянется на свою ширину.

Как сделать чтоб и большие, и маленькие картинки могли существовать на одной странице?

Спасибо.

[Softlink]

так а вы класс вешаете прямо на img? Если на див-обертку повесить эти свойства, то такого не должно происходить.

Покажите лучше код, как вы делаете.

[psywalker]

line-height: 100px; попробуйте для родителя.

[savinzeek]

<div id="item_other_photo">

<div class="other_photo">

<img src="images/delete.png"/>

</div>

<div class="other_photo">

<img src="images/blogs_article_img.png"/>

</div>

<div class="other_photo">

<img src="images/other_photo.png"/>

</div>

</div>

.other_photo{

display:table-cell;

vertical-align:middle;

text-align:center;

width:70px;

height:70px;

overflow:hidden;

}

.other_photo img{

width:70px;

}

вот

[psywalker]

savinzeek, код оформляем в спец. теги.

И скриншот того, что должно получиться.

[Softlink]

<div id="item_other_photo">
 <div class="other_photo">
  <img src="images/delete.png"/>
 </div>
 <div class="other_photo">
  <img src="images/blogs_article_img.png"/>
 </div>
 <div class="other_photo">
  <img src="images/other_photo.png"/>
 </div>
</div>

.other_photo{
display:table-cell;
vertical-align:middle;
text-align:center;
width:70px;
height:70px;
overflow:hidden;
}
.other_photo img{
width:70px;
}

вот

а зачем вам это:

.other_photo img{
width:70px;

?

у вас и как раз должна картинка вставляться в див с размерами 70*70, а которые больше размером, обрежутся overflow'ом.

Есть картинка?

[savinzeek]

это что есть сейчас

это если убрать у img width:70px;

Edited June 22, 2011 by savinzeek

[Softlink]

а у вас table-cell эмулирует ячейку таблицы же, поэтому overwflow тут не поможет. Что-то я сразу не приметил это дело.

Сейчас посоображаю еще.

Edited June 22, 2011 by Softlink

[psywalker]

А если сделать max-width: 100px; ?

А вообще я не понял проблему, что нужно получить? Ну ограничить картинки почему нельзя?

[Softlink]

А если сделать max-width: 100px; ?

А вообще я не понял проблему, что нужно получить? Ну ограничить картинки почему нельзя?

смотри как я понял проблему.

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

Однако изображения могут быть как 10*10, так и 150*150. Автор делает среднее значение блоку: 70*70. Чтобы мелкие картинки центрировались в этом формате, он эмулирует ячейку и ровняет высоту элементу. В результате на большие изображения не действует overflow.

По-моему так все.

Edited June 22, 2011 by Softlink

[savinzeek]

Да вы правильно поняли проблему. И правильное решение это - max-width:70px;

Жаль что сам не додумал.

Огромное спасибо за помощь.

[Softlink]

Да вы правильно поняли проблему. И правильное решение это - max-width:70px;

Жаль что сам не додумал.

Огромное спасибо за помощь.

погодите, а высоту он нормально ровняет?

также, max-height?

[savinzeek]

это финальная картнка

с высотой проблем никаких. я ведь высоту указываю только для дива. для img у меня только ширина

[Softlink]

с высотой проблем никаких. я ведь высоту указываю только для дива. для img у меня только ширина

точно.