Как сделать так, чтобы изображения в строке не конденсировались, чтобы соответствовать меньшим разрешениям?
Не используя Bootstrap или тому подобное, у меня есть ряд изображений подряд с общей максимальной шириной: 1280 пикселей; и минимальная ширина: 1280 пикселей; (все изображения составляют до 1280 пикселей). Но на компьютерах с более низким разрешением, чем 1280, изображения не все остаются в одной строке, некоторые переходят на следующую строку, чтобы соответствовать экрану. Я понимаю, что удержание их в одной строке заставит страницу уйти влево, что потребует боковой прокрутки, но для меня это предпочтительнее, чем уплотнение.
Я знаю, что это вопрос новичка, но если кто-нибудь сможет мне помочь или предложить солидную альтернативу, которую новичок может осуществить довольно легко, это будет оценено.
2 ответа
Добавлять white-space: nowrap; к элементу, который содержит изображения.
Вы можете установить ширину изображения в процентах, чтобы они всегда заполняли ширину родительских элементов:
.wrapper { max-width: 1280px; }
.wrapper img { width: 10%; } /* 10 images in a row */
И если вы хотите версию с горизонтальной полосой прокрутки, используйте width вместо max-width:
.wrapper { width: 1280px; }