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

Question

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

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

В текущем распределении Bootstrap (v3.2.0) пример carousel.html использует простой 1x1 пиксель изображения в качестве фона:

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

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

Answer 1

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

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

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

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

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