Question

我希望制作一个布局页面，其顶部有一个横幅，用于处理以下内容：

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

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

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

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

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

右下角是手机。没有品牌......只是一部手机。：）

enter image description here

你能说明这是怎么做到的吗？是否可以根据这些要求调整图像尺寸？

我此刻的尝试：

    <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>

Answer 1

这是最简单的方法。您可以将图像设置为max-width：1200px，但这可能是一个问题。我很确定这已被问到，并且已经回答了。我懒得找到它。

<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媒体查询可以隐藏切换图像，但代码更多。

，媒体查询应置于底部，以便在需要时优先考虑。

Twitter Bootstrap横幅图片调整大小

1 个答案: