如果一个div在宽度为百分比的情况下，如何将这个div的高度的值设置成和宽度一样
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如果一个div在宽度为百分比的情况下，如何将这个div的高度的值设置成和宽度一样相关的知识，希望对你有一定的参考价值。
方法不限，如果需要引用js或者jq的最好，但是代码希望能够十分简单，感激不尽
楼下正解。但是需要提醒楼主的是，js修改css中高度和宽度样式，可能会造成浏览器重新渲染。一般来说，只用js修改高度，宽度最好是设定值。因为对于流式布局而言，宽度可变是不可接受的，会造成之后的元素全部需要计算位置。如果这个元素本身还是浮动的，那就更难以计算。有时会导致客户端浏览器频繁渲染，屏幕会闪动。媒介类型
描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。
可以对同一个网页指定不同的css来适应不同媒介。
以下为示例：
<style>
@media screen
p.test font-family:verdana,sans-serif; font-size:14px
@media print
p.test font-family:times,serif; font-size:10px
@media screen,print
p.test font-weight:bold
</style> 参考技术A <style type="text/css">
body,htmlmargin:0;padding:0
#boxheight:100%;background:red
</style>
<script src="模板/js/jquery-1.8.0.js"></script>
<script>
$(function ()
var aa = $("#box").innerHeight();
$("#box").css('width',aa);
)
</script>
</head>
<body>
<div id="box">
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
信息想你想你信息<br />
</div>
LZ自己引入一个Jq库文件
如何将最大宽度设置为百分比和像素？
【中文标题】如何将最大宽度设置为百分比和像素？【英文标题】：How to set a max-width as percent AND pixels? 【发布时间】：2015-08-11 11:09:12 【问题描述】：如何防止 div 的宽度扩大到超过一个百分比和一个像素？也就是说，浏览器应该计算百分比的像素值，然后选择两个值中较低的一个。
如果我像这样设置它们：max-width:100px;max-width:20%; 资产管道将简单地选择第二个并忽略第一个。
【问题讨论】：
@dwreck08 我想，但如果这不能用纯 CSS 完成，我会感到惊讶。 @Juhana 的回答是正确的方法，但如果你真的需要最大宽度，你可以使用媒体查询 【参考方案1】：width:20%;
max-width:100px;
这会将宽度设置为 20%，但上限为 100 像素。
【讨论】：
-1，这并不能回答实际问题。我想它在 OPs 案例中有效，但问题是：这个答案中 percent 中的max-width 在哪里？相反，答案只是定义了一个width，这是不同的。
@Zelphir 我不太明白你的评论； OP 特别想将宽度设置为 20% 或 100px，以较小者为准，这正是这样做的。
这与设置两个最大值并选择其中的最小值不同。如果内容没有填满 parent 的 20%，您仍然需要将 element 设置为 20% 宽，虽然这可能不是必需的或不想要的.如果px 和% 都有最大宽度，则不会出现这种行为。
@Zelphir 引用问题：“换句话说，浏览器应该计算百分比的像素值，然后选择两个值中的较低值。”如果父宽度为 1000px，则“百分比的像素值”为 1000px * 20% = 200px。然后“两个值中的较低值”是 200px 与 100px。 Juhana 的答案是正确的！
@Zelphir 问题很清楚，与标题不冲突，但这个答案确实不正确。实际上，OP 写道，浏览器应该选择两者中的最小值，但暗示这个值应该成为最大宽度，而不是宽度。我猜目前的方法是使用 CSS Grid 布局和minmax() 函数。【参考方案2】：
实现这一点的一种方法是简单地使用两个 div
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer
max-width: 90%;
.inner
max-width: 100px;
</style>
【讨论】：
【参考方案3】：这将不适用于不同的图像尺寸/纵横比。如果您知道图像的大小，您可以分别定义 max-width 和 max-height。将此方法用于特定的图像组，但不作为一般规则。
实际示例：您将手机中的 5 张照片放置在一个页面中，并且您需要在屏幕的另一半部分显示一些文字。您将图像的大小减小到 500 像素宽和 300 像素高。您希望它们不超过屏幕的一半，并且在平板电脑上不超过 250 像素。计算最大高度：250*300/500=150px。
.img-class
max-width: 50%;
@media (max-width: 800px)
.img-class
max-height: 150px;
在最新的 Chrome、Firefox 和 IE 上测试。
【讨论】：
【参考方案4】：我遇到了一个需要类似解决方案的具体问题。我需要以原始大小显示所有图像（与纵横比、位置或额外的 HTML 标记无关），最多以像素为单位设置最大宽度。如果屏幕小于这个固定尺寸，它应该缩小以适应。 IE。设置 width 将无法满足要求。
扩展@Kiaurutis 的回答：
img
max-width: 400px;
@media (max-width: 400px)
img
max-width: 100%;
可以在这里看到一个工作示例：https://jsfiddle.net/vrehxmpx/。在这个例子中，有一个大于 400px 的图像（总是按比例缩小）和一个小于阈值的图像（只有在屏幕小于图像时才按比例缩小）。
要调整图像上的边距、边框和其他内容，只需增加@media 的max-width。
【讨论】：
【参考方案5】：您现在可以使用 css min。但是你应该注意IE不支持它。
width: min(20%, 100px)
https://developer.mozilla.org/en-US/docs/Web/CSS/min()
【讨论】：
有关浏览器支持的更多信息，另请参阅caniuse.com/css-math-functions【参考方案6】：不要这样做。
我相信所选答案对于 OP 描述的场景是正确的。但是，一些 cmets 认为 OP 要求将max-width 属性设置为两个值中的较低值，而不是width。这也是可以的，请看下文。
注意：这个解决方案对我来说没有多大意义。请使用选定的答案，它正确演示了 max-width 的用途。下面的代码将确保 max-width 属性是 20% 或 100px 中的较小者。
img
max-width: 20%;
@media (min-width: 500px) /* at 500 pixels, 20% of the width will be 100px */
img
max-width: 100px;
【讨论】：
【参考方案7】：我的网站上的“页面换行”宽度相同。我希望它默认为 95% 宽度，但不超过 1280 像素。这是我使用 CSS 制作的方法
.wrapmax-width:95%;margin:0px auto;
@media screen and (max-device-width:1280px),screen and (max-width:1280px).wrapmax-width:1280px;margin:0px auto;
【讨论】：
以上是关于如果一个div在宽度为百分比的情况下，如何将这个div的高度的值设置成和宽度一样的主要内容，如果未能解决你的问题，请参考以下文章