Html 带照片的引导轮播：最佳图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25554020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap carousel with photos: optimal image size?
提问by lara michaels
I am experimenting with Bootstrap's carousel and would like to use it with photographs.
我正在试验Bootstrap的轮播，并希望将它与照片一起使用。
Question: What is the optimal size for the pictures I should upload for use on the carousel?
问题：我应该上传到传送带上使用的图片的最佳尺寸是多少？
In the current Bootstrap distribution (v3.2.0) the example carousel.htmluses a simple 1x1 pixel image as a background:
在当前的 Bootstrap 发行版 (v3.2.0) 中，示例carousel.html使用一个简单的 1x1 像素图像作为背景：
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
I couldn't find this documented and the photos I have experimented with get stretched/distorted on my laptop screen.
我找不到这个文档，我尝试过的照片在我的笔记本电脑屏幕上被拉伸/扭曲。
采纳答案by Dan
There isn't really an "optimal" image size. In the example with the 1x1 pixel, it's a pixel that is repeating over and over to cover the full span of its containing div.
没有真正的“最佳”图像大小。在具有 1x1 像素的示例中，它是一个不断重复以覆盖其包含 div 的整个跨度的像素。
This Bootply Demo of Carouseluses a 1024x700 px image as an example. If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.
这个Carousel 的 Bootply 演示使用一个 1024x700 像素的图像作为示例。如果您想要一个横跨整个屏幕宽度的轮播图像，最好使用宽度至少为 1024 像素（可能更宽）的图像，尽管您不希望它的分辨率太高，因为这需要很长时间才能加载。
The image height is probably going to be less than the width and really just depends on what type of image you are using and how tall you want the carousel image to be.
图像高度可能会小于宽度，实际上仅取决于您使用的图像类型以及您希望轮播图像的高度。
Otherwise, the best thing to do is to try out different images and see what looks good.
否则，最好的办法是尝试不同的图像，看看哪些看起来不错。
Note: the Bootply demo uses http://placehold.itwhich is a good tool for trying out different image sizes, or check out http://placekitten.com/.
注意：Bootply 演示使用 http://placehold.it这是尝试不同图像尺寸的好工具，或查看http://placekitten.com/。
回答by Texx Smith
Actually, there is a specific aspect ratio that this carousel forces images to be displayed as. If you don't use this aspect ratio the images will be distorted and displayed in this ratio anyway. The carousel will not match the aspect ratio of the images.
实际上，此轮播强制图像显示为特定的纵横比。如果您不使用此纵横比，则图像无论如何都会失真并以该比例显示。轮播将与图像的纵横比不匹配。
The weird ass ratio it uses, which is actually a pretty good looking aspect ratio for this purpose imo is . . . drum roll please . . . 84:25 ! After many attempts I found the best size for me is 1680x500. true it get stretched a bit on larger devices and looses a little crispness, but it's still good looking and a manageable file size and looks great on most monitors.
它使用的奇怪的屁股比例，这实际上是一个非常漂亮的纵横比，用于这个目的 imo 是 . . . 请打鼓。. . 84:25！经过多次尝试，我发现最适合我的尺寸是 1680x500。确实，它在较大的设备上会被拉伸一点，并且会失去一点清晰度，但它仍然很好看，文件大小易于管理，并且在大多数显示器上看起来都很棒。
You can confirm this by using the carousel sample on getbootsrap . com and opening it full screen and taking a screen shot. Then crop out the area with the carousel. Use your preferred method of determining an images size and plug in those numbers in your favorite aspect ratio calculator.
您可以通过使用 getbootsrap 上的轮播示例来确认这一点。com 并全屏打开它并截取屏幕截图。然后用旋转木马裁剪出该区域。使用您首选的方法确定图像大小并将这些数字插入您最喜欢的纵横比计算器中。
