javascript - 响应式设计，以图像为中心

Question

<code>
    <main>    
        <div id="inner-wrapper">    
            <img src="img/my-image.png" alt="" height="" width=""/>    
            <header>    
                <h1>..</h1>
                <nav>       
                </nav>
            </header>
        </div>
    </main>
</code>

大家好

我正在尝试将我的大学元素网站转换为响应式网站。我很难使用我的背景图像与该图像上的其余内容一起缩放到 768 像素，之后删除背景图像并定义不同的图案。我需要图像与页面上的其余内容一起居中。

Answer 1

我会使用 CSS 背景图片而不是包含图片标签。

#inner-wrapper {
    background: url(img/my-image.png) no-repeat center top;
    background-size: cover; /* this fills the container with the background image */
}

注意 background-size: cover;在 IE 8 及以下版本中不受支持，如果这些对您很重要。

以 768px 换出背景:

@media screen and (max-width 768px) {
    #inner-wrapper {
        background: url(img/my-pattern.png) repeat left top;
        background-size: auto;
    }
}