如何使 div 響應並使用固定大小？

Question

我在標簽中有一個 div，它有固定的寬度、高度和邊距。

 <center> <div id="360container" style="width:1252px; height:805px; margin-right:50px; margin-left:50px">This is div </div> </center>

當這個 div 不再適合瀏覽器時，當瀏覽器寬度小於 1252+50+50px 時，我想減小寬度，並且我希望高度減小但仍保持相同的比例（1252x805）。

如何才能做到這一點？

Answer 1

例如，當你想在屏幕尺寸寬度在 320px 和 480px 之間應用特定樣式時，你可以使用（@media queries）來檢測屏幕尺寸。：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
   {
/* your style here */
}

Answer 2

您可以添加以下 CSS：

 #360container {
  width: 100%;
  padding-bottom: 64.2%; /* 805 is 64.2% of 1252 */
}

Answer 3

試試這個代碼，讓我知道它是否滿足你。

<!DOCTYPE html>
    <html lang="en-US">
    <head>
    <style>
    .city {
        float: left;
        margin: 5px;
        padding: 15px;
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }
    </style>
    </head>
    <body>

    <h1>W3Schools Demo</h1>
    <h2>Resize this responsive page!</h2>

    <div class="city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div class="city">
      <h2>Paris</h2>
      <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="city">
      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>

    </body>
    </html>

Answer 4

這是可能有用的東西，純 CSS

<div id="360container" style="position: relative; height: 0; margin:0 auto;
    overflow: hidden;width:60%; max-width:500px; padding-bottom:25%;  border:1px solid #000;">

        <div style="position:absolute; top:0;width:100%;height:100%;max-height:200px;background:#ccc;"></div>

    </div>

看看小提琴

https://jsfiddle.net/je3g4evs/1/

Answer 5

嘗試這個：

.aDiv {
  width: 100%;
  max-width: 480px;
  height: 100px;
}

https://jsfiddle.net/mrz240sa/7/

Answer 6

如果您希望您的網站具有響應性，請使用百分比寬度而不是像素......例如。

<style>
    .city {
        float: left;
        margin: 5px;
        padding: 15px;
        width: 100%;
        height: 300px;
        border: 1px solid black;
    }
</style>
    <h1>W3Schools Demo</h1>
    <h2>Resize this responsive page!</h2>

    <div class="city">
      <h2>London</h2>
      <p>London is the capital city of England.</p>
      <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

如何使 div 響應並使用固定大小？

問題描述

6 個解決方案

解決方案1
2 2015-06-10 07:56:23

解決方案2
1 2015-06-10 07:46:09

解決方案3
1 2015-06-10 08:04:01

解決方案4
0 2015-06-10 07:57:15

解決方案5
0 2020-07-05 12:20:33

解決方案6
-1 2015-06-12 12:25:01

如何使 div 響應並使用固定大小？

問題描述

6 個解決方案

解決方案1 2 2015-06-10 07:56:23

解決方案2 1 2015-06-10 07:46:09

解決方案3 1 2015-06-10 08:04:01

解決方案4 0 2015-06-10 07:57:15

解決方案5 0 2020-07-05 12:20:33

解決方案6 -1 2015-06-12 12:25:01

解決方案1
2 2015-06-10 07:56:23

解決方案2
1 2015-06-10 07:46:09

解決方案3
1 2015-06-10 08:04:01

解決方案4
0 2015-06-10 07:57:15

解決方案5
0 2020-07-05 12:20:33

解決方案6
-1 2015-06-12 12:25:01