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

我想让网站响应。使用智能手机访问网站时，我们的徽标应位于顶部，并且应具有手机屏幕的整个宽度。我尝试这样做：响应式Div或表中的响应式图像

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

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

任何想法？

来源

2014-04-17 user3546800

你可以尝试将宽度设置为'100％' – Adjit

-1

对于响应图像表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; 
}

来源

2014-04-17 21:08:16 4dgaurav

谢谢！这是一个非常好的开始！ td现在正在调整水平大小！但仍然存在一个问题：我希望徽标始终能够完全看到。它应该自动调整垂直。请记住，我希望每个人都能看到整个徽标，而不管移动设备的屏幕大小。 – user3546800

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

来源

2014-04-17 20:53:22

也@Misa 我通常使用这种方法，但这次它没有工作。我想要根据屏幕调整div或table的大小，就像Gaurav做的那样。与Gadgetster一起使用它几乎可以工作。 Img和Div得到调整，但我没有看到整个img！只有它的长度。我必须做什么，img完全看到它的高度？ – user3546800

设置width（不是max-width）到100%并且使用height:auto以便以不同尺寸缩放。

来源

2014-04-17 20:58:25

尝试：

.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%; 
}

来源

2014-04-17 20:58:44 Gadgetster

感谢您的快速回答！我将你的方法与Gauravs结合起来。良好的开端，但仍然有一件事不起作用：自动调整高度！我希望完全看到图像，不管它有多宽。 – user3546800

希望这有助于

.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 
}

来源

2014-04-18 05:50:39 Rohit

我通常使用这个。请看Andrei的评论，他对此提出了相同的建议。 – user3546800

感谢您的所有快速解答。我将两种建议的方法结合起来，如代码所示。表格和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>

谢谢！

来源

2014-04-18 22:05:48 user3546800

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

回答

相关问题