Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2

Общие вопросы по оформлению (65) #2

Страница:   1 … 82 83 84 85 86 87  

Сообщений 1661 страница 1680 из 1738

1

  • Автор: Maquis
  • Модератор
  • Maquis
  • Зарегистрирован: Чт, 5 Ноя 2009
  • Сообщений: 1938
  • Уважение: +1963
  • Позитив: +1658
  • Предупреждения: ‡
  • Последний визит:
    Сб, 26 Фев 2022 23:41:00

В этой теме просим помощи в оформлении форума и его элементов

Столкнулись с трудностями в оформлении вашего форума? Или просто хотите придать ему новый, свежий вид? В этой теме вы можете задать вопросы по стилизации, дизайну и внешнему виду вашего форума. Получите помощь по работе с CSS, настройке цветовой гаммы, шрифтов, размещению изображений и другим элементам оформления.

Вопросы по скриптам и их работоспособности, просьба, задавать в теме Запросы по скриптам #11
Вы новичок и не разбираетесь во всём этом? Загляните в наш справочный раздел. Возможно, там уже содержится ответ на ваш вопрос. Или задайте свой вопрос в теме Общие вопросы от новичков (63) #3

Важная информация перед тем, как задать вопрос:

  • Ответы дают другие участники форума по собственному желанию.

  • Администрация не может гарантировать моментальное решение или абсолютную корректность каждого ответа.

  • Пожалуйста, уважайте чужое время и усилия других пользователей, старайтесь писать грамотно и доходчиво.

  • Будьте взаимовежливы: Грубое или требовательное отношение к участникам форума неприемлемо и может привести к отказу в помощи на всём форуме.

  • Все вопросы, не касающиеся оформления, будут удаляться!

Сформулируйте свой вопрос максимально подробно, чтобы повысить вероятность отклика помощи:

  • Укажите ссылку на форум: Ссылка на форум, с которым требуется помочь, позволит нам увидеть, понять контекст проблемы и предложить наиболее точное решение, не тратя время на догадки.

  • Опишите желаемый результат: Четко и конкретно объясните, чего вы хотите добиться. Например: "Мне нужно, чтобы картинка шапки была во всю ширину блока", или "Хочу увеличить размер шрифта в названиях тем". Чем детальнее вы опишете, тем проще будет помочь.

  • Сделайте скриншот и выделите элемент: Помогающему необходимо понимать с чем ему предстоит вам помочь. Укажите ссылки на схожее оформление (если вы где-то видели подобное). Это не обязательно, но значительно упростит задачу.

Если на ваш вопрос долго нет ответа, пожалуйста, воздержитесь от повторных сообщений или обвинений. Возможно, ваш вопрос оказался излишне сложным, вероятно требующий больше времени и индивидуального подхода, будьте готовы к тому, что участники могут предложить свои услуги на платной основе. Обсуждение условий и оплаты происходит между вами и участником (исполнителем) в личных сообщениях или иных средствах связи (но не в теме!). Администрация форума не несет никакой ответственности за подобные договоренности и их выполнение.

Предыдущая тема: Общие вопросы по оформлению (65) #1

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

+1

Перевести1661

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

https://upforme.ru/uploads/0000/14/1c/26155/t657691.png
https://upforme.ru/uploads/0000/14/1c/26155/t669837.png
https://upforme.ru/uploads/0000/14/1c/26155/t651035.png
https://upforme.ru/uploads/0000/14/1c/26155/t769447.png

0

1662

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3830
  • Уважение: +2702
  • Позитив: +939
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 09:11:24

wildAndrey
Здесь сыграла совокупность сразу нескольких факторов: из-за длины ссылок названия тем последнего сообщения, что вылезали за пределы своего блока, до боковых интервалов, по какой-то причине вылезавших при ширине примерно ниже 1000px. Пришлось пожертвовать боковыми рамками форума ради адекватного сужения форума. Причины этого искать нет времени. Из того что успел сделать: теперь графическая шапка будет без сужения - правая сторона уходит за пределы, что позволяет воспринимать логотип как целое, оставляя основную видимую часть слева; переместил дату/время в меню, сделав его прокручиваемым на узких мониторах. В общем, много всего сделал. Замените полностью html-верх на этот код:

Код:
<style>
@media screen and (max-width: 1000px) {
  #pun {
    padding: 0;
  }
}
#pun-title, #pun-ulinks, #pun-navlinks {
  margin-top: 130px;
}
#pun-ulinks {
  min-width: 100%;
}
#pun-ulinks + div {
  margin-top: 266px;
}
.header {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #5381b5;
  height: 130px;
  overflow: hidden;
}
.header_logo img {
  width: 886px;
}
.header_div {
  margin: 0 auto;
  text-align: center;
  max-width: 980px;
  font-weight: 700;
  color: #fff;
}
.punbb .header_div a {
  color: #fff;
}
.lastpost-link {
    display: block;
    overflow: hidden;
}
.header_menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; 
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;  /* убедиться, что в Firefox скролл будет работает */
}
.header_menu a, .header_menu span {
  flex: 0 0 auto;
  display: inline-block;
  margin: 0 10px;
}
/* Для прочих браузеров скроллбар */
.header_menu::-webkit-scrollbar {
  height: 6px;
}
.header_menu::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 4px;
}
.header_menu::-webkit-scrollbar-track {
  background: transparent;
}
</style>
<div class="header">
  <div class="header_div">
    <div class="header_logo">
      <a target="_blank" href="//gb.my1.ru/"><img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%"></a>
    </div>
    <div class="header_menu">
      <span id="clock"></span>
         |           •        <a target="_blank" href="//gubernski.my1.ru/" img title="На главную страницу сайта - форума Губернский" >Сайт</a>      •       |         •    <a href="/search.php?action=show_new" img title="Не прочитанные сообщения форума с момента Вашего последнего посещения (темы с новыми сообщениями):" style="color:lime;" >Новые сообщения</a>      •       |         •    <a href="/viewtopic.php?id=345" img title="сборник страниц сайта - форума «Губернский г.Чехов»" >Страницы Губернского</a>      •      
   |         •    <a target="_blank" href="/pages/foto" img title="Фото Альбомы микрорайона «Губернский» и города Чехов" >Фото</a>      •       |         •    <a target="_blank" href="https://www.youtube.com/user/wildGUBERNSKY" img title="Видео ролики (клипы) г.Чехов мкр. Губернский (полный сборник)">Видео</a>      •       |         •    <a target="_blank" href="//gb.my1.ru/index/0-3" img title="Обратная связь с администрацией сайта" >Контакты</a>      •       |            
    </div>
    <script>
    (function(){
      const days = ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"];
      const months = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];
      function сlock() {
        const now = new Date();
 
        const year = now.getFullYear();
         const dayname = days[now.getDay()];  
        const month = months[now.getMonth()];
          const day = String(now.getDate()).padStart(2, '0');
          const hours = String(now.getHours()).padStart(2, '0');
          const minutes = String(now.getMinutes()).padStart(2, '0');
          const seconds = String(now.getSeconds()).padStart(2, '0');
 
          const dateout = `${day} ${month} ${year} | ${dayname} | ${hours}:${minutes}:${seconds}`;
          document.getElementById("clock").textContent = dateout;
        }
 
        window.addEventListener("DOMContentLoaded", () => {
        сlock();
        setInterval(сlock, 1000);
       });
     })();
    </script>
  </div>
</div>

На индивидуальную подгонку стиля под разные размеры экранов требуется время, я таким не располагаю. Сколько хватило времени, на столько откорректировал.

+2

1663

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

Reysler
Спасибобольшое 🙏 , Вам за проделанную работу и потраченное время!
Теперь шапка растягивается 👍 как надо, до краёв .
Но, возникла другая неприятность 🤷
Пропали часы с датой.😭
Мне уже не удобно Вас просить исправить эту проблему, поскольку Вы и так сделали очень много всего по улучшению оформления моего форума.
Пусть остается так как есть 🙋
Всего Вам доброго! 🤝
Желаю удачи Вам и успехов в работе !
Ещё  раз благодарю 🙏 Вас за Ваш труд!
https://upforme.ru/uploads/0000/14/1c/26155/t531395.jpg

0

1664

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3830
  • Уважение: +2702
  • Позитив: +939
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 09:11:24
wildAndrey написал(а):

Пропали часы с датой.😭

На вашем форуме я их вижу:
https://upforme.ru/uploads/0000/14/1c/15830/t944573.png
Возможно из-за малого размера экрана они скрылись за пределы видимой области. Попробуйте тогда такой вариант:

Код:
<style>
@media screen and (max-width: 1000px) {
  #pun {
    padding: 0;
  }
}
#pun-title, #pun-ulinks, #pun-navlinks {
  margin-top: 130px;
}
#pun-ulinks {
  min-width: 100%;
}
#pun-ulinks + div {
  margin-top: 266px;
}
.header {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #5381b5;
  height: 130px;
  overflow: hidden;
}
.header_logo img {
  width: 886px;
}
.header_div {
  margin: 0 auto;
  text-align: center;
  font-weight: 700;
  color: #fff;
}
.punbb .header_div a {
  color: #fff;
}
.lastpost-link {
  display: block;
  overflow: hidden;
}
.header_menu {
  display: block;
  margin-top: 5px;
  padding-bottom: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; 
  -webkit-overflow-scrolling: touch;
}
.header_menu span, .header_menu a {
  display: inline-block;
  margin: 0 10px;
}
/* Для прочих браузеров скроллбар */
.header_menu::-webkit-scrollbar {
  height: 5px;
}
.header_menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.25);
  border-radius: 3px;
}
.header_menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.55);
}
.header_menu::-webkit-scrollbar-track {
  background: transparent;
}
</style>
<div class="header">
  <div class="header_div">
    <div class="header_logo">
      <a target="_blank" href="//gb.my1.ru/"><img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%"></a>
    </div>
    <div class="header_menu">
      <span id="clock"></span>
         |           •        <a target="_blank" href="//gubernski.my1.ru/" img title="На главную страницу сайта - форума Губернский" >Сайт</a>      •       |         •    <a href="/search.php?action=show_new" img title="Не прочитанные сообщения форума с момента Вашего последнего посещения (темы с новыми сообщениями):" style="color:lime;" >Новые сообщения</a>      •       |         •    <a href="/viewtopic.php?id=345" img title="сборник страниц сайта - форума «Губернский г.Чехов»" >Страницы Губернского</a>      •      
   |         •    <a target="_blank" href="/pages/foto" img title="Фото Альбомы микрорайона «Губернский» и города Чехов" >Фото</a>      •       |         •    <a target="_blank" href="https://www.youtube.com/user/wildGUBERNSKY" img title="Видео ролики (клипы) г.Чехов мкр. Губернский (полный сборник)">Видео</a>      •       |         •    <a target="_blank" href="//gb.my1.ru/index/0-3" img title="Обратная связь с администрацией сайта" >Контакты</a>      •       |            
    </div>
    <script>
    (function(){
      const days = ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"];
      const months = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];
      function сlock() {
        const now = new Date();
 
        const year = now.getFullYear();
         const dayname = days[now.getDay()];  
        const month = months[now.getMonth()];
          const day = String(now.getDate()).padStart(2, '0');
          const hours = String(now.getHours()).padStart(2, '0');
          const minutes = String(now.getMinutes()).padStart(2, '0');
          const seconds = String(now.getSeconds()).padStart(2, '0');
 
          const dateout = `${day} ${month} ${year} | ${dayname} | ${hours}:${minutes}:${seconds}`;
          document.getElementById("clock").textContent = dateout;
        }
 
        window.addEventListener("DOMContentLoaded", () => {
        сlock();
        setInterval(сlock, 1000);
       });
     })();
    </script>
  </div>
</div>

0

1665

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

к сожалению, ничего не изменилось 😔
Да, бог с ними, с часами. Не заморачивайтесь больше.
Скажите, пожалуйста , а почему на Вашем скриншоте самое верхнее изображение (картинка шапки) не расширяется до границ ширины белой страницы , где начинается  объявление ?
Нельзя ли сделать так, чтобы ширина верхней картинки совпадала с шириной основной страницы?
Вот так 👇
https://upforme.ru/uploads/0000/14/1c/26155/t696828.jpg

С уважением, Андрей.
https://upforme.ru/uploads/0000/14/1c/26155/t621788.jpg

Отредактировано wildAndrey (Сб, 20 Дек 2025 13:57:08)

0

1666

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3830
  • Уважение: +2702
  • Позитив: +939
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 09:11:24

wildAndrey
У вас какой браузер и его версия?

0

1667

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3830
  • Уважение: +2702
  • Позитив: +939
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 09:11:24
wildAndrey написал(а):

Скажите, пожалуйста , а почему на Вашем скриншоте самое верхнее изображение (картинка шапки) не расширяется до границ ширины белой страницы , где начинается  объявление ?
Нельзя ли сделать так, чтобы ширина верхней картинки совпадала с шириной основной страницы?

Сделать то можно, но вы получите эффект "размытого изображения", плюс надо будет подгонять под разные разрешения экранов (она будет смещаться). Предлагаю оставить так. Это самый компромиссный вариант.

0

1668

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

Я прошу прощения, но форум делается не для меня а для других пользователей, у которых могут быть разные браузеры и устройства, планшет, ноутбук компьютер или телефон,
Поэтому стиль оформления, как мне кажется, должен быть более менее универсальный для всех.
На вашем скрине картинка шапки не растянулась до ширины основной страницы , а это смотрится не очень красиво.
Поэтому я и попоосил сделать так, чтобы она расширялась одинаково вместе с основной страницей.
А на телефонах и планшете это не заметно .
На других стилях нет таких проблем, но они менее красивые .
https://upforme.ru/uploads/0000/14/1c/26155/t590104.jpg
вот так нельзя сделать картинку чтобы она расширялась также как основная страница ?
Заранее благодарю 🙏

раньше у меня был стиль Cornflower,
С ним таких проблем не возникало,
Но он менее красивый
Вот.дилемма и не знаешь, как быть 🤷
Извините, пожалуйста 🙏

Замучил Вас совсем 😑

Отредактировано wildAndrey (Сб, 20 Дек 2025 15:24:53)

0

1669

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36
Reysler написал(а):

Сделать то можно, но вы получите эффект "размытого изображения", плюс надо будет подгонять под разные разрешения экранов (она будет смещаться). Предлагаю оставить так. Это самый компромиссный вариант.

Ну, можно, хотя бы, чтобы на Вашем мониторе картинка была на всю ширину основной страницы,
Думаю, что у всех мониторы и экраны меньше, и размытости не будет.

Если я правильно понимаю, то за это отвечает вот этот размер:

}
.header_logo img {
  width: 886px;
}

можно увеличить до 900, 950 или 1000?

Отредактировано wildAndrey (Вс, 21 Дек 2025 02:00:23)

0

1670

  • Автор: Reysler
  • LastMan
  • Reysler
  • Зарегистрирован: Вт, 9 Дек 2008
  • Сообщений: 3830
  • Уважение: +2702
  • Позитив: +939
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 09:11:24
wildAndrey написал(а):

Если я правильно понимаю, то за это отвечает вот этот размер:

}
.header_logo img {
  width: 886px;
}

можно увеличить до 900, 950 или 1000?

Верно, можете пробовать, экспериментировать. Однако, как я писал выше - вы получите эффект "размытого изображения".

+1

1671

  • Автор: Merlin777
  • Заслуженный
  • Merlin777
  • Зарегистрирован: Ср, 10 Апр 2024
  • Сообщений: 281
  • Уважение: +161
  • Позитив: +181
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:23:26
wildAndrey написал(а):

Нельзя ли сделать так, чтобы ширина верхней картинки совпадала с шириной основной страницы?

Можно.

Посмотрите на шапку вот этого сайта:

https://gribnikikybani.mybb.ru/

Там верхняя картинка (баннер) вставляется через стиль:

<style>
#pun-title h1 {  display: none;}
#pun-title table {
    background-size: contain;
    background-position: center;
    background-image: url("https://forumstatic.ru/files/0010/54/6f/10853.jpg");
    /* (img-height / img-width * container-width) */
    /* (300 / 1316 * 100) */
    height: 0;
    padding-top: 22.7%;
}
</style>

Там 22.7% это отношение высоты картинки  к её ширине в процентах.

+1

1672

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7610
  • Уважение: +6173
  • Позитив: +6707
  • Пол: Мужской
  • Последний визит:
    Вчера 23:44:37
wildAndrey написал(а):

можно увеличить до 900, 950 или 1000?

Будет увеличиваться сама картинка.  Правильнее ставить не через html, а фоном через css. Нужно разрезать картинку на три части: левая и правая одинарные, и третья картинка фон, который размножается. При увеличении разрешения левая и правая уходят по углам а по середине будет размножающийся фон (обычно делается квадратом, в данном случае можно сделать по высоте левого и правого угла и полосой). На фотошопе надо подогнать стыковку левой и правой картинки и центра (размножающегося фона).
То бишь нужно отредактировать вот этот блок:

<div class="header_logo">
      <a target="_blank" href="//gb.my1.ru/"><img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%"></a>
    </div>

Убираем:

<img title="на главную страницу" src="https://forumstatic.ru/files/000e/c6/39/92536.jpg" alt="на главную страницу" height="100" border="0" width="100%">


Затем ссылке задаем блочность и указываем фиксированную высоту, равную высоту картинки, и вешаем фон на ссылку, то есть приблизительно это будет выглядеть так:

.header_logo a {
  display: block;
  width: 100%;
  height: 100px;
  background: url(левая картинка) top left no-repeat,
                     url(правая картинка) top right no-repeat,
                     url(центр - размножающийся фон) repeat;
}

Так будет правильнее и будет выглядеть одинаково при любом разрешении.

+2

1673

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7610
  • Уважение: +6173
  • Позитив: +6707
  • Пол: Мужской
  • Последний визит:
    Вчера 23:44:37
Merlin777 написал(а):

background-size: contain;

В случае с contain, будет тот же самый эффект, как и сейчас при вставке через html. а при cover будет обрезаться картинка, при 100% картинка будет искажаться. Нельзя одну картинку вставить, и чтобы она была одинаковой на любом разрешении. При изменении разрешения изменяются и размеры картинки.

0

1674

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

Reysler
огромное Вам спасибо за труд 🙏
Всего Вам доброго-доброго !

0

1675

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

Merlin777
Спасибо 🙏 большое за совет !
Доберусь до компьютера попробую 👌 сделать так же .

0

1676

  • Автор: Merlin777
  • Заслуженный
  • Merlin777
  • Зарегистрирован: Ср, 10 Апр 2024
  • Сообщений: 281
  • Уважение: +161
  • Позитив: +181
  • Пол: Мужской
  • Последний визит:
    Сегодня 01:23:26
kolobdur74 написал(а):

В случае с contain, будет тот же самый эффект, как и сейчас при вставке через html. а при cover будет обрезаться картинка, при 100% картинка будет искажаться. Нельзя одну картинку вставить, и чтобы она была одинаковой на любом разрешении. При изменении разрешения изменяются и размеры картинки.

Ничего искажаться не будет! Там пропорции же написаны.

0

1677

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

kolobdur74
Спасибо огромное , Вам за такой развёрнутый ответ 🙏
Попробую обязательно поэкспериментировать .

+1

1678

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7610
  • Уважение: +6173
  • Позитив: +6707
  • Пол: Мужской
  • Последний визит:
    Вчера 23:44:37
Merlin777 написал(а):

Ничего искажаться не будет! Там пропорции же написаны.

Почитайте спецификации css. При contain - картинка вписывается целиком (её реальный размер используется), если она будет меньше ширины блока, то будет эффект полей, как и сейчас. При cover - картинка старается вписаться по размерам блока, соответственно она растягивается на ширину блока, и соответственно высота будет тоже увеличиваться и уходить за пределы блока, так как высоту надо делать фиксированную. И картинка по высоте будет обрезаться. При 100% картинка будет растягиваться по ширине блока и по высоте блока, но так как высоту опять таки надо фиксировать, то картинка будет искажаться, так как будет вписываться в данную высоту при других пропорциях. Попробуйте поэкспериментируйте на досуге на резиновых дизайнах с разным масштабом браузера.

+1

1679

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7610
  • Уважение: +6173
  • Позитив: +6707
  • Пол: Мужской
  • Последний визит:
    Вчера 23:44:37

wildAndrey, стоит только учесть, что для если углы будут широкие, и будут превосходить разрешение экрана мобильных устройств, то уголки будут накладываться друг на друга. В таком случае для мобилок лучше либо ставить отдельную свою картинку, либо вообще её убирать.

+1

1680

  • Автор: wildAndrey
  • Заслуженный
  • wildAndrey
  • Зарегистрирован: Ср, 4 Май 2011
  • Сообщений: 246
  • Уважение: +17
  • Позитив: +43
  • Пол: Мужской
  • Последний визит:
    Сб, 31 Янв 2026 11:09:36

kolobdur74
хорошо, буду иметь ввиду , спасибо 🙏 большое !

+1

Страница:   1 … 82 83 84 85 86 87  

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Общие вопросы по оформлению (65) #2