карусель bootstrap с фотографиями: оптимальный размер изображения?

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

вопрос: каков оптимальный размер для фотографий, которые я должен загрузить для использования на карусели?

в текущем дистрибутиве начальной загрузки (v3.2.0) пример карусель.HTML-код использует простое 1x1 пиксельное изображение в качестве фона:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

Я не мог найти это документально и фотографии, с которыми я экспериментировал растягивается / искажается на экране моего ноутбука.

10
carousel css html twitter-bootstrap

2 ответов

на самом деле нет" оптимального " размера изображения. В Примере с пикселем 1x1 это пиксель, который повторяется снова и снова, чтобы покрыть полный диапазон его содержащего div.

этой Bootply демо карусели использует изображение 1024x700 px в качестве примера. Если вы хотите иметь изображение карусели, которое охватывает всю ширину экрана, вероятно, хорошая идея использовать изображение шириной не менее 1024 пикселей (возможно, шире), хотя вы не хотите, чтобы оно было слишком высокое разрешение, так как это займет много времени для загрузки.

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

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

Примечание: демонстрация Bootply использует http://placehold.it что хороший инструмент для попробуйте различные размеры изображения, или проверитьhttp://placekitten.com/.

10

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

странный коэффициент задницы, который он использует, что на самом деле довольно хорошо выглядит соотношение сторон для этой цели ИМО. . . барабанная дробь, пожалуйста . . . 84:25 ! После многих попыток я нашел лучший размер для меня 1680x500. истинный он немного растягивается на больших устройствах и теряет немного четкости, но он по-прежнему хорошо выглядит и управляемый размер файла и отлично смотрится на большинстве мониторов.

вы можете подтвердить это, используя образец карусели на getbootsrap . com и открыть его на весь экран и сделать снимок экрана. Затем обрезайте область с помощью карусели. Используйте предпочтительный метод определения размера изображения и подключите эти числа в вашем любимом калькуляторе пропорций.

0