html - 带照片的 Bootstrap 轮播 : optimal image size?

标签 html css twitter-bootstrap carousel

我正在试验 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/

相关文章:

javascript - 有没有办法将鼠标悬停上的个人文本添加到全日历

wordpress - 将 Bootstrap 按钮样式添加到 WordPress 中的默认古腾堡按钮 block

php - 有没有办法对从 MySQL 检索的特定数据进行样式化?

css - 如何更改 LESS 文件中的 Bootstrap 面板主体?

javascript - 在 TinyMCE 中使用 &lt;style&gt; 标签

javascript - 如何使用 Jquery 从 "li "的属性中获取值?

css - Parent-div 不随子 div 扩展

javascript - 如何使用 :hover stay in hover state on click? 制作一个 div

html - IE7 BUTTON 白色轮廓

html - 三 Angular 形周围的CSS框阴影