【发布时间】：2014-06-29 11:43:41
【问题描述】：
我对引导程序和一般编程非常陌生，所以请耐心等待！我确实花了几个小时试图通过这里/谷歌找到我的问题的解决方案，现在是寻求帮助的时候了！
基本上，我正在尝试制作一个用于在轮播中显示照片的网站。我希望我的网站具有响应能力，以便在较小的设备上运行。我所有的原始图像都是相同的大小/尺寸（2304 x 1728 所以4:3，可能太大了）并使用img-responsive 类。
在大屏幕上看起来不错，但是当我在较小的笔记本电脑屏幕和平板电脑上尝试时，图像高度会导致出现滚动条，因此您看不到图像/标题的底部。但是，图像宽度是响应式的，并且在不滚动的情况下会缩小以适应。
我理解轮播大小由图像大小决定，因此合乎逻辑的解决方案是使我的图像大小在高度上更小 - 但我需要保持纵横比，更小的图像看起来不超好的。我也尝试将固定高度设置为样式，但没有奏效。
对于占据大部分浏览器窗口（允许导航栏/页眉/页脚）的轮播来说，理想的图像尺寸（以 px 为单位）是多少，以及如何制作它以使高度不需要滚动条？
非常感谢！
【问题讨论】：
-
您是否尝试过查询媒体？ @media screen and (max-device-width: 480px) and (orientation: [portrait or Landscape]){/* CSS 在这里调整图片大小 */}
-
使用 css 您可以使用媒体查询并在轮播图像元素上设置最大高度。您希望使用媒体查询，因为您在移动设备上的高度将远小于 2000 像素宽的设备。
-
我需要做一些阅读，因为我还没有对媒体查询做过任何事情，这一切都让我头疼！我会调查一下，谢谢。我想我希望有一个简单的类或高度设置我可以弹出，它会完成这项工作！一厢情愿！
标签： image twitter-bootstrap scroll carousel