Изображения растягиваются

InstantCMS 2.X
#1 13 августа 2020 в 10:57
Всем привет. Как в этом шаблоне basic.goodtheme.ru сделать так, чтобы при загрузке изображений в медиасетку изображения не растягивались не пропорционально? Какие настройки установить? При загрузке пробовал разные настройки, изображения растягиваются некрасиво.
#2 13 августа 2020 в 11:47
@innexis, думаю стандартными средствами CSS можно решить эту проблему.

Как-то так:

  1. background-size: auto;
  2.  
или

  1. background-size: contain;
  2.  
В любом случае надо увидеть сайт на котором есть проблема, так вам тут мало что подскажут вразумительного без ссылки.
#3 17 августа 2020 в 17:10
Ссылка KAIF.FM
#4 17 августа 2020 в 21:00

Как в этом шаблоне basic.goodtheme.ru сделать так

@innexis

Вообще-то у шаблона есть разработчик. И разработчик с достаточной базой знаний. Чего не обращаетесь?
По сути, на примере галереи на главной странице.
Попробуйте правило (style2.css, строка 47):
  1.  
  2. .hover01 .figure img {
  3. -webkit-transform: scale(1);
  4. transform: scale(1);
  5. -webkit-transition: .3s ease-in-out;
  6. transition: .3s ease-in-out;
  7. }
  8.  
привести к виду:
  1.  
  2. .hover01 .figure img {
  3. -webkit-transform: scale(1);
  4. transform: scale(1);
  5. -webkit-transition: .3s ease-in-out;
  6. transition: .3s ease-in-out;
  7. width: 100%;
  8. height: 100%;
  9. object-fit: cover;
  10. object-position: center;
  11. }
  12. Значение у абстракного счётчика не забудьте изменить
  13.  
#5 24 августа 2020 в 11:50
Большое спасибо, сработало
#6 24 августа 2020 в 14:25

Слушаю радио KAIF.FM

@innexis
Немного не в тему, но сайт понравился.
Растянуть можно и онлайн радио на странице — kaif.fm/ru/pages/online-radio.html

Взамен существующего кода:
  1.  
  2. <div>
  3. "Stream URL: "
  4. <a href="https://stream.radio.co/s00d0f22d8/listen" target="_blank"> https://stream.radio.co/s00d0f22d8/listen</a>
  5. </div>
  6.  
Можно использовать свой плеер (или несколько) к примеру так:
  1.  
  2. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css">
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.min.js"></script>
  4. <p>
  5. <audio id="player1" preload="none" controls="" width="100%"
  6. <source="" src="https://stream.radio.co/s00d0f22d8/listen " type="audio/mpeg">
  7. </audio>
  8. </p>
  9.  
#7 26 августа 2020 в 12:48
Спасибо, а mediaelementplayer поддерживает вывод названия трека и исполнителя? Я просто использую плеер, который в настройках разрешено растягивать до 600px максимум, но у него есть вывод этих метаданных.
#8 26 августа 2020 в 16:49

Спасибо, а mediaelementplayer поддерживает вывод названия трека и исполнителя? Я просто использую плеер, который в настройках разрешено растягивать до 600px максимум, но у него есть вывод этих метаданных.

@innexis
MediaElement.js это прежде всего скрипт с разноформатными аудио и видео плеерами.
И является весьма многогранным в отношении возможностей вывода медиа файлов.
Два примера вывода (на демке) в контенте: xyz-nk.ru/news/10-video-i-audio-na-saite.html и
xyz-nk.ru/posts/5-moi-pervyi-post-v-soobschestve.html

Вывод названных метаданных, как таковой, в MediaElement-е отсутствует. Подобный вывод
решается многочисленными "обвесами" для данного плеера. Пример для отдельной вкладки
(Ваш вариант): xyz-nk.ru/media/a1/a1.html
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.