Question

我在标签中有一个div，它有一个固定的宽度，高度和边距。

＆＃13;

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

＆＃13;

当浏览器宽度小于1252 + 50 + 50px时，我想减小此div不适合浏览器的宽度，我希望高度降低但仍然保持相同的比例（1252x805））。

如何做到这一点？

Answer 1

当您想要在320px和480px之间的屏幕尺寸宽度时应用特定样式时，您可以使用（@media查询）来检测屏幕尺寸：

@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

试试这段代码，让我知道它是否满足你。

function populateJsTree(response) {
    var nodes = [], i;
    for (i = 0; i < response.length; i++) {
        nodes.push(response[i].ParentNodeName);
    }
    $('#FolderTreeId').jstree({
        'core': {
            'data': nodes
        }
    });
}

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

如果您希望您的网站响应，请使用百分比宽度而不是像素.... 例如。

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

Answer 6

尝试一下：

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

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

如何使div响应并使用固定大小？

6 个答案: