JEFFRY A. DECOLA

MY PHP CONTAINERS

GITHUB REPO

NARROW PICTURE CONTAINER

Allow a picture to scale and display across the screen

Code written in php

EXAMPLE 1

What it does

narrow image picture

EXAMPLE 2

Another pic

narrow image picture

HOW IT WORKS

Screen width is in red


box_picture_container

narrow image picture



HTML 

            
            <div class="narrow_picture_container">

                <img src="yourpicturelink.jpg" alt="your note"/>

            </div>

CSS 

            
            .narrow_picture_container {
                text-align:center;
                height: 300px;
                position: relative;
                margin-left: auto;
                margin-right: auto;
                overflow: hidden;
            }
        
            .narrow_picture_container img {
                position: absolute;
                margin: auto;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }