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

Статус
Закрыто для дальнейших ответов.

Multilimon

Новичок
Регистрация
17.02.2018
Сообщения
1
Здравствуйте!

Подскажите пожалуйста, на странице в несколько рядов, размещено по 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 шт? То есть, чтобы сам блок с содержимым просто уменьшался в размерах при уменьшении экрана.

Заранее спасибо за ответ.
 

Jackito

Designer
Регистрация
28.01.2011
Сообщения
289
Может помогут медиа-запросы?
 

Volly

Well-Known Member
Регистрация
21.03.2012
Сообщения
831
Задайте картинкам ширину в процентах.
Например, #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 наиболее подходящие.
 
Статус
Закрыто для дальнейших ответов.
Верх Низ