我正在试验 Bootstrap的旋转木马,并希望将其与照片一起使用。
问题:我应该上传用于轮播的图片的最佳尺寸是多少?
在当前的 Bootstrap 发行版 (v3.2.0) 中,示例 carousel.html使用简单的 1x1 像素图像作为背景:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
我找不到这个记录,我试验过的照片在我的笔记本电脑屏幕上被拉伸(stretch)/扭曲。
最佳答案
实际上并没有“最佳”图像尺寸。在具有 1x1 像素的示例中,它是一个不断重复以覆盖其包含 div 的整个范围的像素。
这个 Bootply Demo of Carousel 以一张 1024x700 像素的图片为例。如果你想要一个横跨整个屏幕宽度的旋转木马图像,使用至少 1024 像素宽(可能更宽)的图像可能是个好主意,尽管你不希望它的分辨率太高,因为这需要很长时间才能加载。
图片高度可能会小于宽度,这实际上仅取决于您使用的图片类型以及您希望轮播图片的高度。
否则,最好的办法是尝试不同的图像,看看哪个看起来不错。
注意:Bootply 演示使用 http://placehold.it这是尝试不同图像尺寸的好工具,或查看 http://placekitten.com/ .
关于html - 带照片的 Bootstrap 轮播 : optimal image size?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25554020/