Twitter Bootstrap 横幅图像调整大小答案

【问题标题】：Twitter Bootstrap banner image resizingTwitter Bootstrap 横幅图像调整大小
【发布时间】：2014-10-04 22:35:39
【问题描述】：

我正在寻找一个布局页面，它在顶部有一个横幅，它处理以下内容：

桌面 - 最大化屏幕（将使用 1024 像素限制的中心页面）桌面 - 一旦尺寸低于 1024，横幅就会缩小，以适应屏幕的宽度电话/手机 - 横幅使用全宽

下面是一个技术渲染图，使用的软件超出你的想象，所以我不会详细说明，但希望它能说明问题。

第一个框显示浏览器最大化的屏幕。横幅最大为 1024，其下方屏幕的内容也是如此。

下一张图片采用 1024 分辨率的屏幕。屏幕使用完整的浏览器。

最后一张图片显示了一个屏幕，浏览器未最大化，并且使用的像素小于 1024。横幅调整大小（不裁剪...调整大小）

右下角是电话。没有品牌……只是一部手机。 :)

你能说明这是怎么做到的吗？可以根据这些要求调整图像（一个？）的大小吗？

我目前的尝试：

    <div class="container">
        <div id="myCarousel" class="carousel">
            <div class="carousel-inner">
                <img class="item active img-responsive fullsize" src="/Content/images/1.jpg" />
                <img class="item img-responsive fullsize" src="/Content/images/2.jpg" />
                <img class="item img-responsive fullsize" src="/Content/images/3.jpg" />
            </div>
        </div>

        <ul class="nav nav-pills navbar-inverse">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li><a href="#our"><span class="glyphicon glyphicon-list"></span> Our Friesians</a></li>
            <li><a href="#stock"><span class="glyphicon glyphicon-picture"></span> Stock</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Help <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> About Us</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Contact Details</li>
                    <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> Contact Us</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-map-marker"></span> Directions</a></li>
                </ul>
            </li>
        </ul>


        <div class="container-fluid">


This is the Index page.


        </div>
    </div>

【问题讨论】：

添加了当前的尝试，并切换到了一个不需要布尔回复的问题。 :)
我回答了。 :) 不知道那是不是你要找的。span>
你有这个css吗。
感谢 Quentin ...它只是使用 bootstrap.css ...在这里玩想法：ellispark.craigkeen.com ...

标签： html css image twitter-bootstrap

【解决方案1】：

这是最简单的方法。您可以将图像设置为最大宽度：1200 像素，但这可能是个问题。我很确定这已经被问过了，并且已经回答了。懒得找了。

<html>
<head>
<style>
#mlp{
    /*The next line controls the fit of the image.*/
    max-width: 100%;
}
#container{
    /*The next line controls the max of the container.
    Change it to the value you want.*/
    max-width: 1000px;
    border: 1px solid black;

}
/*media query suggested as an alternative to the above.*/
@media(max-width: 480px) {
  #mlp {
    max-width: 100%;
  }
  #container {
    max-width: 480px;
  }
}
</style>
</head>
<body>
<div id="container">
    <img id="mlp" src="http://img64.imageshack.us/img64/4163/01an1.jpg">
</div>
</body>
</html>

有一些 css 媒体查询可以用隐藏来切换图像，但它更多的代码。媒体查询应放在底部，以便在需要时获得优先权。

【讨论】：

我看到了这个答案：stackoverflow.com/questions/9651467/… ---- 但不确定“@media(max-width: 480px)....”的去向。这对我来说很新鲜。那是 CSS 吗？
在您的样式标签/文件中。就像我的回答一样。您可以将该答案与该答案混合以处理所有尺寸。
@Craig - 这是一个media query。它告诉浏览器根据浏览器的宽度使用不同的样式。主要用于响应式设计。
@Craig 媒体查询没问题。您可能不需要它们仅将图像调整为最大宽度，就像在您的高科技示例中一样。 :) 当您希望文本在小屏幕上变大或与您想要的相反的东西时，媒体查询会更好。
哦 WTF。现在我明白了。我认为 Youtube 可能需要升级才能处理这些问题，而互联网则需要大修。