调整图像大小以适合设置最​​大宽度的div

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.

我的标题中有一个图像,我想显示为全屏,最大宽度为2000像素。如果浏览器宽度超过2000像素,则图像只显示在屏幕*。

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?

这只能用CSS还是需要JavaScript?

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

####我不确定如何设置包含div的样式,以便正确处理图像。

1 个解决方案

#1

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%; }

#background-div {background:url(../ images / yourimage.jpg)no-repeat fixed;背景尺寸:封面;身高:100%;宽度:100%; }

This will automatically adjust when you resize your window.

当您调整窗口大小时,这将自动调整。