使用CSS保持div的长宽比

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我想创建一个可以随着窗口宽度变化而改变其宽度/高度的div 。

是否有任何CSS3规则可以允许高度根据宽度而改变， 同时保持其长宽比 ？

我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。

#1楼

只需为padding-bottom创建具有百分比值的包装器<div> ，如下所示：

div { width: 100%; padding-bottom: 75%; background: gold; /** <-- For the demo **/ }

<div></div>

这将导致<div>的高度等于其容器宽度的75％（长宽比为4：3）。

这取决于以下事实：

相对于生成的盒子的包含块的宽度计算百分比（来源： w3.org ，强调我的）

其他长宽比和100％宽度的填充底部值：

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

将内容放在div中：

为了保持div的长宽比并防止其内容拉伸，您需要添加一个绝对定位的子级，并使用以下方法将其拉伸到包装的边缘：

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

这是一个演示，还有另一个更深入的演示

#2楼

为了增加Web_Designer的答案， <div>的高度（完全由底部填充组成）为其所包含元素的宽度的75％。这是一个很好的摘要： http : //mattsnider.com/css-using-percent-for-margin-and-padding/ 。我不确定为什么会这样，但事实就是如此。

如果您希望div的宽度不是100％，则需要另一个包装div来设置宽度：

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

我最近使用了类似于Elliot的图像技巧的方法，以允许我使用CSS媒体查询根据设备分辨率提供不同的徽标文件，但仍然像<img>那样自然地按比例缩放（我将徽标设置为背景图像具有正确纵横比的透明.png）。但是Web_Designer的解决方案可以为我节省一个http请求。

#3楼

Elliot启发了我这个解决方案-感谢：

aspectratio.png是一个完全透明的PNG文件，大小与您喜欢的长宽比相同，在我的情况下为30x10像素。

的HTML

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

请注意： background-size是css3的功能，可能不适用于您的目标浏览器。您可以检查互操作性（位于caniuse.com上）。

#4楼

如果整个容器结构是基于百分比的，则这将是默认行为，您能否提供一个更具体的示例？

以下是我的意思的示例，如果您的整个父级层次结构均基于％，则无需任何其他js / css即可进行任何浏览器窗口调整，这是否可能与您的布局无关？

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>

#5楼

我找到了一种使用CSS进行此操作的方法，但是您必须小心，因为它可能会根据您自己网站的流量而变化。我这样做是为了将具有恒定纵横比的视频嵌入到我的网站的宽度部分中。

假设您有一个这样的嵌入式视频：

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

然后，您可以将其全部放入带有“视频”类的div中。该视频类可能是您网站中的流畅元素，因此，它本身没有直接的高度限制，但是当您调整浏览器的大小时，它的宽度将根据网站的流量而变化。这可能是您在保持视频的特定长宽比的同时尝试获取嵌入式视频的元素。

为此，我将图像放在“视频”类div中的嵌入式对象之前。

!!! 重要的部分是图像具有您希望保持的正确的宽高比。另外，请确保图像的大小至少与您希望视频（或您要维护其AR）所依据的最小尺寸一样大。当按比例调整大小时，这将避免图像分辨率中的任何潜在问题。例如，如果您想保持3：2的长宽比，则不要仅使用3px x 2px的图像。它可能在某些情况下可以工作，但我尚未对其进行测试，因此避免使用它可能是一个好主意。

您应该已经为网站的流动元素定义了这样的最小宽度。如果不是这样，最好这样做是为了避免在浏览器窗口变得太小时将元素切掉或重叠。最好在某个时候有一个滚动条。网页应该获得的最小宽度约为600像素左右（包括任何固定宽度的列），因为除非您要与电话友好的网站打交道，否则屏幕分辨率不会变小。 !!!

我使用完全透明的png，但是如果您正确执行操作，我并不认为它最终会变得很重要。像这样：

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

现在，您应该能够添加类似于以下内容的CSS：

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

确保您还删除了对象内的任何显式的高度或宽度声明，并嵌入了复制/粘贴嵌入代码通常随附的标签。

它的工作方式取决于视频类元素的位置属性，并且您想要的项目保持一定的宽高比。它利用了在元素中调整大小时图像将保持其适当纵横比的方式。它通过将动态图像的宽度/高度强制为要由图像调整的视频类别元素的100％，来告诉视频类元素中的所有其他内容都可以充分利用动态图像提供的不动产。

很酷吧？

您可能需要尝试一下才能使其与您自己的设计一起使用，但这实际上对我来说效果很好。这里有一般概念。

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3142826

标签

Caniuse