asked on

Fit image height of the screen in a div

Hi,
I'm trying to make an image to fit the full height of a div in the body of the page. I'm using master pages.

This is the code in the master page:

<html>
<head runat="server">
    <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>


</head>
  


<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-lg  navbar-light bg-primary  fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item 1 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 2</a>
                    </li>
                </ul>
         
            </div>
        </nav>


        <div class="container-fluid" style="margin-top:58px;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Open in new window

This code on the default.aspx page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <style>
        [class*="col-"] {
            float: left;
            border: 1px solid red;
        }

        .row::after {
            content: "";
            clear: both;
            display: table;
        }

        * {
            box-sizing: border-box;
        }


        /*Small devices (landscape phones, 576px and up)*/
        @media (max-width: 768px) {
            body {
                background-color: green;
                font-size: 12px;
            }

            div.leftDiv {
                display: none;
            }
        }


        img {
            max-width: 100%;
            height: auto;
        }

        /*Medium devices (tablets, 768px and up)*/
        @media (min-width: 768px) {
        }

        /*Large devices (desktops, 992px and up)*/
        @media (min-width: 992px) {
        }

        /*Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1200px) {
            img {
                /*height: 86vh;*/
            }

            div {
                text-align: center;
            }
        }
    </style>


    <div class="row">
        <div class="col-12 col-md-2 leftDiv" style="background-color:beige">
            <h3>Left Div</h3>
            <p>This is the left div</p>
        </div>
        <div class="col-12 col-md-7 col-sm-9" style="background-color: lightblue; height: auto; text-align: center">
            <div class="row" style="background-color:darkblue">
                <div class="col-12">
                    <asp:Button ID="Button1" runat="server" Text="Fit to screen" />                 
                </div>
            </div>
            <div class="row">
                <div class="col-12" runat="server" id="div_image">
                    <img src="images/20180519_084957.jpg" />
                </div>
            </div>

        </div>
        <div class="col-12 col-md-3 col-sm-3 marks" style="background-color:teal">
            <h3>Right Div</h3>
            <p>This is the right div</p>
        </div>
    </div>
</asp:Content>

Open in new window

Screenshot below.

Two things happening here, the first thing is the gap between the navbar and the body content. I can close the gap if I change the margint-top in the master page

<div class="container-fluid" style="margin-top:58px;">

Open in new window

But can I a make it to 'snap' to the navbar without specifying a margin??

The second thing is I'd like to make the image to reach the bottom of the page (red bit) regarding the screen size. At the moment, I have a blank gap at the bottom. I can change this by setting

 img {
                height: 86vh;
            }

Open in new window

But this won't work on different screen sizes. So, do I need to specify a vertical height for different media queries to achieve this??

Thanks!
Capture.PNG

ASKER CERTIFIED SOLUTION

David Kelly

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Adrian Cross

ASKER

Thanks for your input!