带照片的自举旋转木马：最佳图像尺寸？

Question

我正在试验Bootstrap的旋转木马，并希望将其与照片一起使用。

问题：我应该上传的图片在旋转木马上使用的最佳尺寸是多少？

在当前的Bootstrap发行版（v3.2.0）中，示例carousel.html使用简单的1x1像素图像作为背景：

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

我无法找到这些记录，我试验过的照片在我的笔记本电脑屏幕上被拉伸/扭曲。

Answer 1

真的不是最佳的＆＃34;图片尺寸。在具有1x1像素的示例中，它是一个反复重复以覆盖其包含div的整个范围的像素。

此 Bootply Demo of Carousel 使用1024x700像素图像作为示例。如果你想要一个跨越屏幕整个宽度的旋转木马图像，使用至少1024像素宽（可能更宽）的图像可能是一个好主意，尽管你不希望它太高分辨率，因为这需要很长时间才能加载。

图像高度可能会小于宽度，实际上只取决于您使用的图像类型以及您想要旋转木马图像的高度。

否则，最好的办法是尝试不同的图像，看看看起来不错。

注意：Bootply演示使用 http://placehold.it这是尝试不同图片尺寸的好工具，或查看http://placekitten.com/。

Answer 2

实际上，有一个特定的宽高比，该轮播迫使图像以该比例显示。如果不使用此宽高比，则图像将始终以该比例失真并显示。转盘将不匹配图像的纵横比。

它使用的奇怪的驴子比率，实际上对于imo是一个很好看的长宽比。 。 。请鼓滚。 。 。 84:25！ 经过多次尝试，我发现最适合我的尺寸是1680x500。没错，它在较大的设备上会有点拉伸，并松散一些脆性，但是它仍然不错，文件大小也易于管理，在大多数显示器上看起来都很棒。

您可以使用getbootsrap上的轮播示例来确认这一点。 com，然后全屏打开并进行屏幕截图。然后用转盘切出该区域。使用首选的方法确定图像大小，然后将这些数字插入您喜欢的宽高比计算器中。