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>

大家好。

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

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 */
}

注意背景大小：封面; IE 8及以下版本不支持，如果这些对你很重要。

以768px交换背景：

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

Answer 2

以％格式表示所有高度宽度，如宽度：50％;并为图像和div

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

2 个答案: