如何使 div 响应并使用固定大小？
[英]How to make a div responsive and use a fixed size?
问题描述
I have a div within a tag, this has a fixed width, height and margin.
我在标签中有一个 div，它有固定的宽度、高度和边距。
<center> <div id="360container" style="width:1252px; height:805px; margin-right:50px; margin-left:50px">This is div </div> </center>
I want to decrease the width when this div not fit's the browser anymore, when the browser width is less than 1252+50+50px, and i want the height to decrease but still keep the same ratio(1252x805).当这个 div 不再适合浏览器时，当浏览器宽度小于 1252+50+50px 时，我想减小宽度，并且我希望高度减小但仍保持相同的比例（1252x805）。
How can this be done?如何才能做到这一点？
6 个解决方案
解决方案1
2 2015-06-10 07:56:23
When you want to apply a specific style when the screen size width between 320px and 480px for example ,You can use ( @media queries) to detect the screen size.:例如，当你想在屏幕尺寸宽度在 320px 和 480px 之间应用特定样式时，你可以使用（@media queries）来检测屏幕尺寸。：
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
{
/* your style here */
}
解决方案2
1 2015-06-10 07:46:09
You can add the following CSS :您可以添加以下 CSS：
#360container {
width: 100%;
padding-bottom: 64.2%; /* 805 is 64.2% of 1252 */
}
解决方案3
1 2015-06-10 08:04:01
Try this code and let me know whether it satisfies you or not.试试这个代码，让我知道它是否满足你。
<!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>
解决方案4
0 2015-06-10 07:57:15
Here is something that may work, pure CSS这是可能有用的东西，纯 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>
Take a look at the fiddle看看小提琴
https://jsfiddle.net/je3g4evs/1/ https://jsfiddle.net/je3g4evs/1/
解决方案5
0 2020-07-05 12:20:33
Try this:尝试这个：
.aDiv {
width: 100%;
max-width: 480px;
height: 100px;
}
https://jsfiddle.net/mrz240sa/7/ https://jsfiddle.net/mrz240sa/7/
解决方案6
-1 2015-06-12 12:25:01
if you want your website to be responsive use percentage widths instead of pixels.... for eg.如果您希望您的网站具有响应性，请使用百分比宽度而不是像素......例如。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.