当前位置: 首页 > 面试题库 >

如何在保持宽高比的同时使用CSS自动调整DIV的大小?

曾景龙
2023-03-14
问题内容

我所拥有的是HTML中的标准格式,该格式允许用户选择“宽度”选项和“高度”选项(每个值的范围从1到10)。当他们发送表单时,它将表单发送到PHP /
HTML页面,PHP在其中获取“ Width”和“ Height”变量并将其分配给DIV的宽度和高度。

但是我想做的只是使用“ Width”和“
Height”变量来给该DIV分配一个长宽比,然后让该DIV自动调整为其内部容器的100%,但同时保持相同的长宽比。

示例
用户选择宽度4和高度2,然后发送表格。在接收PHP页面上,那个DIV(一个接收宽度和高度比率的数字)位于一个容器中,该容器的宽度为1000px,高度为600px。所以现在,该DIV的大小调整为1000像素宽和500像素高(那是4到2的长宽比)

任何想法,代码,脚本都将非常有帮助,非常感谢!

亚伦


问题答案:

由于padding-*属性的百分比值是根据生成的框的包含块的宽度计算的,因此您可以:

  • 添加一个虚拟元素,该元素不包含任何内容,但在垂直填充(padding-toppadding-bottom)中包含一个百分比,对应于所需的宽高比。
  • 使用绝对定位可以从元素的正常流中删除所有内容,以防止它们增加高度。然后,使其生长以填充容器。

    position: relative;

    width: 50%;

    }

    dummy {

    padding-top: 75%; / 4:3 aspect ratio /

    }

    element {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: silver;

    }

    some text
    

注意可以使用垂直边距代替垂直填充,但是会出现边距崩溃。为了防止这种情况,请添加

#container {
  display: inline-block;
}



#container {

  display: inline-block;

  position: relative;

  width: 50%;

}

#dummy {

  margin-top: 75%; /* 4:3 aspect ratio */

}

#element {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: silver;

}


<div id="container">

  <div id="dummy"></div>

  <div id="element">

    some text

  </div>

</div>

使用::before伪元素,无需使用伪元素:

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}



#container {

  position: relative;

  width: 50%;

}

#container:before {

  padding-top: 75%; /* 4:3 aspect ratio */

  content: ''; /* Enable the pseudo-element */

  display: block;

}

#element {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: silver;

}


<div id="container">

  <div id="element">

    some text

  </div>

</div>


 类似资料:
  • 问题内容: 即时通讯试图在Java的内存中调整bufferdImage的大小,但要保持图像的长宽比,即时通讯有类似这样的内容,但这不好 问题答案: 您可以查看perils-of-image- getscaledinstance.html ,它解释了为什么应避免在某些答案中使用的原因。 本文还提供了替代代码。

  • 问题内容: 我想创建一个div可以随窗口宽度变化而改变其宽度/高度的。 是否有任何CSS3规则可以允许高度根据宽度而改变,同时保持其长宽比? 我知道我可以通过JavaScript来做到这一点,但我宁愿只使用CSS。 问题答案: 只需使用百分比值创建包装器,如下所示: 它将导致高度等于其容器宽度的75%(长宽比为4:3)。 这取决于以下事实: 相对于生成的盒子的包含块的宽度计算百分比(来源:w3.o

  • 问题内容: 我正在处理图像,但遇到宽高比问题。 如您所见,并且已经指定。我为图像添加了CSS规则: 但是,我收到和。如何设置图像以调整尺寸,同时保持其纵横比。 img { 如果对于指定区域太大,则会缩小图像(不利的一面是,不会放大图像)。

  • 问题内容: 我的图片尺寸会很大,我想使用jQuery缩小图片,同时保持比例不变,即长宽比相同。 有人可以指出一些代码或解释其逻辑吗? 问题答案: 看看来自的这段代码

  • 问题内容: 目前,通过STYLE,我可以在和高度上使用和,反之亦然,但是我仍然不能将图像分别限制在一个特定的位置,无论是太宽还是太高。 有任何想法吗? 问题答案: 如果仅在图像上定义一维,则将始终保留图像长宽比。 图像是否比您喜欢的更大/更佳? 您可以将其放入DIV中,该DIV设置为图像所需的最大高度/宽度,然后设置“ overflow:hidden”。那将收获超出您想要的任何东西。 如果图像的宽

  • 问题内容: 当我给图像一个宽度或高度的百分比时,它只会保持其宽高比增长/缩小,但是如果我想与另一个元素具有相同的效果,是否完全可以使用百分比将宽度和高度绑定在一起? 问题答案: 您可以使用纯CSS来实现;无需JavaScript。这利用了百分比(相对于包含块的width)(有点违反直觉)的事实。这是一个例子: