Question

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

此外，当图像拉伸以适应屏幕时，它是否与高度保持一致，高度也保持不变？

仅使用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;}

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

Answer 1

如果您将封面用作背景图片，则可以使用封面。

CSS

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

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

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

1 个答案: