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

响应式更改div大小,保持宽高比

侯博易
2023-03-14
问题内容

当我给图像一个宽度或高度的百分比时,它只会保持其宽高比增长/缩小,但是如果我想与另一个元素具有相同的效果,是否完全可以使用百分比将宽度和高度绑定在一起?


问题答案:

您可以使用纯CSS来实现;无需JavaScript。这利用了padding-top百分比(相对于包含块的width)(有点违反直觉)的事实。这是一个例子:

.wrapper {

  width: 50%;

  /* whatever width you want */

  display: inline-block;

  position: relative;

}

.wrapper:after {

  padding-top: 56.25%;

  /* 16:9 ratio */

  display: block;

  content: '';

}

.main {

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  /* fill parent */

  background-color: deepskyblue;

  /* let's see it! */

  color: white;

}


<div class="wrapper">

  <div class="main">

    This is your div with the specified aspect ratio.

  </div>

</div>


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

  • 问题内容: 使用CSS flex box模型,如何强制图像保持其纵横比? JS小提琴:http://jsfiddle.net/xLc2Le0k/2/ 请注意,图像会拉伸或收缩以填充容器的宽度。很好,但是我们也可以拉伸或缩小 高度 以保持图像比例吗? 的HTML 的CSS 问题答案: 对于img标签,如果您定义一侧,那么将调整另一侧的大小以保持纵横比,并且默认情况下,图像会扩展到其原始大小。 使用此

  • 问题内容: 我需要将元素的 宽度 保持为 高度 的百分比。因此,随着高度的变化,宽度也会更新。 通过为padding-top使用%值可以实现相反的效果,但以padding-left为百分比将是对象宽度的百分比,而不是其高度。 因此,使用这样的标记: 我想使用这样的东西: 为了确保根据盒子 的高度保持 盒子的 长宽比 。高度是可变的,因为它的百分比裕度-当窗口的高度改变时,盒子的高度也会改变。 我知

  • (在stackoverflow上已经提出了类似的问题,但这个问题有更多的限制,例如特定的最大宽度、最大高度、所需的特定高度和宽度,并且没有布局偏移。) 我想要一个具有以下约束的响应图像: 最大宽度:100%,这样它就不会溢出到右侧,并且在减小屏幕宽度时会有响应 如何使用CSS实现这一点? (如果CSS无法实现这一点,那么可能是在JavaScript中?) 我尝试了几个CSS功能,例如对象适合度和最

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

  • 问题内容: 我所拥有的是HTML中的标准格式,该格式允许用户选择“宽度”选项和“高度”选项(每个值的范围从1到10)。当他们发送表单时,它将表单发送到PHP / HTML页面,PHP在其中获取“ Width”和“ Height”变量并将其分配给DIV的宽度和高度。 但是我想做的只是使用“ Width”和“ Height”变量来给该DIV分配一个长宽比,然后让该DIV自动调整为其内部容器的100%,