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

InstantCMS 2.X

#1 13 августа 2020 в 10:57

Всем привет. Как в этом шаблоне basic.goodtheme.ru сделать так, чтобы при загрузке изображений в медиасетку изображения не растягивались не пропорционально? Какие настройки установить? При загрузке пробовал разные настройки, изображения растягиваются некрасиво.

Постигаю дзэн InstantCMS Слушаю радио KAIF.FM

#2 13 августа 2020 в 11:47

@innexis, думаю стандартными средствами CSS можно решить эту проблему.

Как-то так:

background-size: auto;

или

background-size: contain;

В любом случае надо увидеть сайт на котором есть проблема, так вам тут мало что подскажут вразумительного без ссылки.

https://vk.com/instantmake - полезное сообщество в VK про InstantCms

#3 17 августа 2020 в 17:10

Ссылка KAIF.FM

Постигаю дзэн InstantCMS Слушаю радио KAIF.FM

Сегодня в 17:32

#4 17 августа 2020 в 21:00

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

Зуд

Вообще-то у шаблона есть разработчик. И разработчик с достаточной базой знаний. Чего не обращаетесь?

По сути, на примере галереи на главной странице.
Попробуйте правило (style2.css, строка 47):

 
.hover01 .figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

привести к виду:

 
.hover01 .figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
Значение у абстракного счётчика не забудьте изменить

Украинский для инстант

#5 24 августа 2020 в 11:50

Большое спасибо, сработало

Постигаю дзэн InstantCMS Слушаю радио KAIF.FM

#6 24 августа 2020 в 14:25

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

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

Взамен существующего кода:

 
<div>
"Stream URL: "
<a href="https://stream.radio.co/s00d0f22d8/listen" target="_blank"> https://stream.radio.co/s00d0f22d8/listen</a>
</div>

Можно использовать свой плеер (или несколько) к примеру так:

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelementplayer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.9/mediaelement-and-player.min.js"></script>
<p>
	<audio id="player1" preload="none" controls="" width="100%" 
	<source="" src="https://stream.radio.co/s00d0f22d8/listen " type="audio/mpeg">
	</audio>
</p>

#7 26 августа 2020 в 12:48

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

Постигаю дзэн InstantCMS Слушаю радио KAIF.FM

#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

Смена фона всего сайта

Какие шаблоны нужны?

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Помогите разобраться с размером изображения в списке

Тип контента, комментарии, изображения

OWL-слайдер набора изображений отображение

[ЕСТЬ РЕШЕНИЕ] Формат WEBP в наборе изображений

[ЕСТЬ РЕШЕНИЕ] Как изменить размер изображения при загрузке

[ЕСТЬ РЕШЕНИЕ] Формат конвертированного изображения webp

InstantCMS Team

О проекте

Поддержка

Дополнения