Question

我想让我的网站响应。使用智能手机访问网站时，我们的徽标应位于顶部，并应具有手机屏幕的整个宽度。我试过这个：

.image {
      background-image: url("imageurl.jpg");
     background-size: contain;
     background-repeat:no-repeat;
     max-width:100pc;
     max-height:auto;
}

问题是，你需要为图像所在的div或td定义一个大小。我不知道大小，因为屏幕的大小会有所不同。我是否需要div或td，这是响应并改变其大小？

有什么想法吗？

Answer 1

请勿使用背景图片。使用<img>标记。在max-width: 100%;元素上设置img。

Answer 2

将width（不是max-width）设置为100%并使用height:auto以便按不同尺寸进行缩放。

Answer 3

尝试：

.image {
     background: url(images.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     width: 100%;
     height:100%;
}

Answer 4

希望这有帮助

.images{
       background-size:100% auto;   
       //here 100% is for width and auto is height(for self adjusting according to width )
       max-width:A px;   //where A is the actual width of image 
}

Answer 5

感谢所有快速解答。我结合了两种建议的方法，如代码所示。 Table和img现在调整大小，具体取决于屏幕的大小。

但仍有一个问题：img显示在它的整个长度中，但不在它的高度！我希望img总能完全被看到。

    <style>
table { 
    border-collapse: collapse; 
    width: 100% 
}

td { 
    border: 1px solid #000;
    background-image:url("http://www.s4ea.org/images/logor.jpg");
    background-repeat: no-repeat;

     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     width: 100%;
     height:100%;

}




</style>
<body>
<table>
    <tr>
        <td>image</td>
    </tr>
</table>
</body>
</html>

谢谢！

Answer 6

表格DEMO

中的响应式图片

table { 
    border-collapse: collapse; 
    width: 100% 
}

td { 
    border: 1px solid #000; 
}

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */
}

对于div DEMO

中的自适应图像

.image{
  width:100%;
  height:20em; // your height 100%, or fixed
  display:block;
  background:url('yourpath/image.jpg')no-repeat center center;nd-size:cover; 
}

响应式Div或表中的响应式图像

6 个答案: