Question

我正在制作一个prestashop商店，我已经将一个图像包含在标题中，图像没有响应。如何使图像响应？

查看标题图片的代码：

header {
  z-index: 1;
  position: relative;
  background: #FFF url('http://s23.postimg.org/ha3x2zf23/header_image1_sized.jpg')!important;
  padding-bottom: 100px; }

任何人都可以帮我改变代码，将响应式图片放入标题中吗？

由于

Answer 1

使用background-size:contain;并以百分比或em分配电子邮件的大小（这取决于您）。

请在这里测试一下 http://jsbin.com/zohinomiya/1/ 并尝试重新调整浏览器窗口的大小以查看缩放。

<! doctype HTML>
<html>
    <head>
    <title>TEST</title>
    <style>
    #test {
        background-image: url('http://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-image2.jpg');
        background-repeat:no-repeat;
        background-size:contain;
        background-position:center;
        height: 100%;
    }
    </style>
    <script>

    </script>
    </head>
        <body>
            <div id ="test">s</div>
        </body>
</html>

响应头部图像

1 个答案: