Перейти к содержимому

Реферальная программа Мегаплана


Картинка в блоге популярных новостей

#1 Ostnod

Ostnod
  • Пользователь
  • 73 сообщений
  • Репутация: 6
0

Отправлено 08 Сентябрь 2015 - 19:25

Всем привет.

Столкнулся с такой проблемой на сайте last-day.net, а именно в блоке Популярные статьи. Вся загвоздка в том, что размер картинки зависит от длины title, т.е. от названия. Иногда оно выходит короткое и из-за этого картинка растягивается не на весь блок и смотрится нелепо.

Может кто знает, как можно исправить эту проблему или где посмотреть и что подкрутить?

 

Заранее спасибо.

 

P.S. topnews выглядит сл. образом:

<li>
	<img src="{image-1}">
	<a href="{link}">
		{title limit="100"}
	</a>
</li>

 

 

  • 0

#2 BLIK

BLIK
  • Супермодератор
  • 3 179 сообщений
  • Репутация: 632

Отправлено 08 Сентябрь 2015 - 19:43

@Ostnod,Сайт не открывается. Но, попробуй убавить лимит заголовка, например поставь максимум 50-60 зн, чтоб не длинный был заголовок.(отрывок) 


  • 1


#3 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 703 сообщений
  • Репутация: 405

Отправлено 08 Сентябрь 2015 - 20:31

@Ostnod, попробуй подкрутить следующим образом:

<li style="width:100%;text-align:center;">
	<img src="{image-1}" style="width:100%">
	<a href="{link}">
		{title limit="100"}
	</a>
</li> 

Добавленные стили теоретически должны сделать элементы списка на всю ширину "оберточного" div-а и вставляемую картинку такой же ширины... Ссылка должна центрироваться...

 

Если поможет, то убирай добавленные стили из кода и прописывай их через css...


  • 2
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 Ostnod

Ostnod
    Topic Starter
  • Пользователь
  • 73 сообщений
  • Репутация: 6

Отправлено 08 Сентябрь 2015 - 20:39

@BLIK, спасибо за помощь, но нет - я это в первую очередь попробовал :) P.S. а чего сайт не открывается?

 

@ShowPrint, помогло, спасибо!


  • 0

#5 BLIK

BLIK
  • Супермодератор
  • 3 179 сообщений
  • Репутация: 632

Отправлено 08 Сентябрь 2015 - 20:43

@Ostnod,Нет сайт не открывается :( 

 

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


  • 0


#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 703 сообщений
  • Репутация: 405

Отправлено 08 Сентябрь 2015 - 20:53

@Ostnod, старайтесь все-таки картинки делать одного размера, т.к. с это "лекарство" - на скорую руку... По хорошему надо и другие параметры css подкрутить: поработать в высотой картинки, чтоб она не изменяла её пропорций...

Насколько я понимаю в настоящий момент height картинки привязан к высоте блока и видимо задан как 100%, что приводит к искажению пропорций первоначальной картинки... Если я ничего не путаю (а с меня станется), то надо бы высоту "отпустить" и прописать overflow:hidden для стиля img - таким образом, все что не будет помещаться должно скрываться, а пропорции должны сохраняться...

 

То есть принцип чего и где "крутить" ясен, надо посмотреть/потестить и подкрутить все нужные параметры...


Сообщение отредактировал ShowPrint: 08 Сентябрь 2015 - 20:55

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 Ostnod

Ostnod
    Topic Starter
  • Пользователь
  • 73 сообщений
  • Репутация: 6

Отправлено 08 Сентябрь 2015 - 21:28

@ShowPrint, спасибо ещё раз за помощь.

Прописал то, что Вы порекомендовали уже в css стили. Высоту картинки сделал 100%, теперь она полностью вписывается в блок.

А раньше она была стандартного размера, а остальное содержимое скрывалось (overflow:hidden), поэтому казалось, что она неправильно масштабировалась. Потом только уже с самими блоками поколдую, чтобы смотрелось лучше :)

 

Тему можно считать решённой и исчерпанной.


  • 0


Оформление форума – IPBSkins.ru