CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Craig
Craig

Reputation: 18734

Twitter Bootstrap banner image resizing

I am looking to make a layout page, which has a banner at the top, that handles the following:

Desktop - Maximized screen (Would have a center page used of 1024px limited) Desktop - as soon as the size goes lower than 1024, the banner scaled down, to fit the width of the screen Phone/Mobile - Banner uses full width

Below is a technically rendered diagram, using software which is beyond any of your imaginations, so I will not elaborate, but hopefully it get's the point across.

First box shows a screen with the browser maximized. Banner goes to 1024 max, as does the content of the screen below it.

Next image shoes a 1024 resolution screen. Screen uses full browser.

Last image down shows a screen, with the browser NOT maximized, and using less than 1024 pix. The banner resizes down (doesn't crop... resizes)

And the bottom right is a phone. No brand... just a phone. :)

enter image description here

Can you show how this can done? Can the image (an ?) be resized based on these requirements?

My attempt at the moment:

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

Upvotes: 1

Views: 1688

Answers (1)

Quentin Engles
Quentin Engles

Reputation: 2832

This is the simplest possible way to do it. You can just make the image max-width: 1200px, but that could be a problem down the line. I'm pretty sure this has been asked, and answered already. I'm too lazy to find it.

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

There are css media queries that would switch out the image with hiding instead, but it's more code. Media queries should be placed at the bottom to take precedence when they're needed.

Upvotes: 2

Related Questions