Руководство по стилям веб-дизайна

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

Это навело меня на мысль, что мне следует отложить их в сторону и позволить тексту обтекать их. Однако, просматривая множество сайтов в Интернете, я вижу, что никто не оборачивает изображения текстом, а изображения используются в качестве блочных элементов.

Проблема в том, что, поскольку это тонкие изображения, при просмотре на больших экранах на этой «линии» обычно остается много пустого места.

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

Привет, Дэйви, Я сомневаюсь, что есть какие-то рекомендации для чего-то подобного, не так ли? Это дело вкуса, я думаю... Но я бы, возможно, пошел по вашему пути: максимально сократил пустые пространства. Так: https://jsfiddle.net/thzgd09s/5/

Не могли бы вы поделиться своим... здесь? Хендра

@hdewantara - Спасибо Если это дело вкуса, то я бы выбрал встроенные изображения.

Моя проблема заключалась в том, что я не видел веб-сайтов, использующих этот стиль, а скорее изображения в блочном стиле.

Но большинство их изображений широкие, поэтому это работает.

Мои, правда, узкие и высокие — вот тут-то и начинается моя проблема. Что касается того, чтобы поделиться своим, на данный момент я не могу, потому что это все еще конфиденциально (владелец пока не хочет, чтобы я его показывал). Но я попробую, может быть, смоделировать его. Спасибо, Дэйви

@deathshadow – Спасибо!

Вчера я принял решение следовать своему первоначальному инстинкту и завернуть их, и после этого я был очень счастлив! Вышло великолепно!

А теперь, прочитав то, что вы тоже предложили - мне стало еще удобнее.

Что касается содержания, я понимаю - но думаю, что понимаю вас достаточно хорошо.

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

Однако это должно быть плавно, поэтому, если размер экрана небольшой, он должен отображаться правильно.

Я так и сделал! Я практически удалил всплывающее окно на экранах меньшего размера, поэтому изображение становится отдельным и центрируется - выглядит великолепно! Большое спасибо! @Дэвид, спасибо за предложение.

Раунд на самом деле не поможет мне в этой ситуации, но я буду иметь это в виду.

Спасибо.

Вы правы, фотографии с пустыми местами под ними просто некрасивы, об этом речи не идет. Я заметил, что программисты используют один хитрый трюк. Вы можете сделать продукты круглыми и расположить изображения по центру, как обложки. Это вам очень поможет. Пример: HTML: <дел>

CSS:

#аватар {

фоновое изображение: url('ССЫЛКА НА ИЗОБРАЖЕНИЕ ПРОДУКТА ЗДЕСЬ');

/* создаем квадратный контейнер */

ширина: 150 пикселей;

высота: 150 пикселей;

выровнять-элементы: по центру;

выровнять-контент: центр;

/* заполняем контейнер, сохраняя соотношение сторон и обрезая по размеру */

размер фона: обложка;

/* центрируем изображение по вертикали и горизонтали */

фоновая позиция: центр;

/* округляем края до круга с радиусом границы 1/2 размера контейнера */

радиус границы: 50%;

маржа: авто;

граница: 2 пикселя, сплошная #fff;

box-shadow: 0px 20px 120px #000;

}