CODEWITHSUNDEEP
htmlcssimagewidth
Denoteone
Denoteone

Reputation: 4055

resize image to fit in div with a max width set

I have an image in my header that I want to show as full screen with a max-width of 2000px. If the browser is wider than 2000px then the image just shows in the center of the screen.

Also when the image stretches to fit the screen can it stay proportional with the height staying the same with the height also stretching?

Is this possible with just CSS or is JavaScript needed? 

    <header class="front-page" role="banner">

        <div id="inner-header">
            <div id="hero-container">

                <img class="hero_img" src="http://mywebsite.com/wp-content/themes/theme_wp/images/hero_img.jpg"/>

            </div>
            <nav id="nav-sticky" role="navigation">
                <?php bones_main_nav(); ?>
            </nav>

        </div>

    </header>   

header.front-page{width:100%;height:500px;}

img.hero-img{
max-width:2000px;   
display: block;
margin-left: auto;
margin-right: auto;}

#### I am not sure how to style the containing div's so they handle the image correctly.

Upvotes: 0

Views: 2581

Answers (1)

tywalker
tywalker

Reputation: 78

You can use cover if you are using it as a background image.

css

#background-div { background: url(../images/yourimage.jpg) no-repeat fixed; background-size: cover; height: 100%; width: 100%; }

This will automatically adjust when you resize your window.

Upvotes: 1

Related Questions