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



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

#1

Поделиться сообщением #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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Бесплатные платформы блогов
  2. Блог - "Создание Блога и его монетизация"
  3. Создание социальной сети
  4. CMS для создания новостного сайта
  5. Изображения для блога

#2

Поделиться сообщением #2



BLIK

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

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

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


  • 1

Sign Up  bonus 100$ в фарма ПП Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org | Качественный хостинг



#3

Поделиться сообщением #3



ShowPrint

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

Отправлено 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

Поделиться сообщением #4



Ostnod

Ostnod
    Topic Starter
  • Неактивные
  • 73 сообщений
  • Репутация: 6

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

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

 

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


  • 0

#5

Поделиться сообщением #5



BLIK

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

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

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

 

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


  • 0

Sign Up  bonus 100$ в фарма ПП Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org | Качественный хостинг



#6

Поделиться сообщением #6



ShowPrint

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

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

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

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

 

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


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

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


#7

Поделиться сообщением #7



Ostnod

Ostnod
    Topic Starter
  • Неактивные
  • 73 сообщений
  • Репутация: 6

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

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

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

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

 

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


  • 0


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