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

Фотография
- - - - -

Ширина блока div относительно размера страницы


  • Вы не можете создать новую тему
  • Закрытая тема Тема закрыта
Сообщений в теме: 2

#1 Multilimon

Multilimon

    Прохожий

    Топикстартер
  • Новичок
  • 0
    1 сообщ.

Отправлено 17 Февраль 2018 в 21:02

Здравствуйте!
 
Подскажите пожалуйста, на странице в несколько рядов, размещено по 100 картинок в каждом ряду, примыкающих друг к другу. Картинки размером 10х10.
 
При уменьшении размера экрана часть картинкок раньше перескакивали с своего ряда на нижний, подстраиваясь под размер экрана.
 
Мне нужно было, чтобы при уменьшении размера экрана, количество картинок в одном ряду не уменьшалось, а оставалось строго 100 картинок в каждом ряду.
 
Эту проблему я решил, добавлением в стили CSS, блока:
#boxShadowtext {

  width: 100%;
  max-width: 1030px;
min-width: 1030px;
  margin: 1em auto;
  padding: 1em;
  border-radius: 10px;
  background: rgb(255,245,237) radial-gradient(circle at 50% , rgba(255,255,255,.65),           rgba(255,255,255,.35));
  box-shadow:
   inset rgba(0,0,0,.6) 0 -3px 8px,
   inset rgba(252,255,255,.7) 0 3px 8px,
   rgba(0,0,0,.8) 0 3px 8px -3px;
}
И с помощью <div id="boxShadowtext"> упаковал все картинки на странице в этот блок с уже строго заданными размерами по ширине 1030px; 
 
Теперь количество картинок в каждом ряду по 100 зафиксировано блоком boxShadowtext, но при уменьшении размера экрана блок boxShadowtext вместе с картинками в нем вылазит за пределы экрана, страница эта: kartinki.rabotavinternet.net или вот скрин выходящего блока за пределы сайта при уменьшении экрана: ibb.co/mvyxi7
 
Вопрос: Как можно сделать, чтобы блок boxShadowtext с картинками расположенными в нём, автоматически уменьшался в размерах, под разные размеры экрана,  но чтобы количество картинок при этом в ряду не уменьшалось и оставалось равное 100 шт? То есть, чтобы сам блок с содержимым просто уменьшался в размерах при уменьшении экрана.
 
Заранее спасибо за ответ.
  • 0

Спонсор

#2 Jackito

Jackito

    Designer

  • Участник
  • 103
    289 сообщ.

Отправлено 17 Февраль 2018 в 22:27

Может помогут медиа-запросы?


  • 0

#3 Volly

Volly

    Увлеченный

  • Участник
  • 110
    528 сообщ.

Отправлено 17 Февраль 2018 в 23:11

Задайте картинкам ширину в процентах.

Например,  #boxShadowtext  имеет 10 картинок в ряд, тогда будет правило:

#boxShadowtext img {width: 10%;}

Высоту можно не задавать, она подстроится автоматом.

 

Таки да, такие правила:

width: 100%;
max-width: 1030px;
min-width: 1030px;

взаимоисключающие и ширина в любых случаях будет ровно 1030 пиксела.

Попробуйте убрать эти три строки совсем или измените числа:

width: 100%;
max-width: 300px;
min-width: 1200px;
Изменяя размеры окна браузера подберите вместо 300 и 1200 наиболее подходящие.

Сообщение отредактировал Volly: 17 Февраль 2018 в 23:17

  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей