響應式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或表中的響應式圖像

回答

相關問題