html title attribute




保持div与CSS的纵横比 (12)

单位:

您可以将vw单位用于元素的宽度和高度 。 这可以根据视口宽度保留元素的高宽比。

vw:视口宽度的1/100。 [ MDN ]

或者,您也可以使用vh作为视口高度,或者甚至使用vmin / vmax来使用较小/较大的视口尺寸( here讨论)。

例如:1:1宽高比

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}
<div></div>

对于其他宽高比,您可以使用下表根据元素的宽度计算高度值:

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

例如:4x4方格的网格

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

这里有一个小提琴与这个演示 ,这里是一个解决方案, 以垂直和以横向为中心的内容的响应网格 。

浏览器支持vh / vw单位是IE9 +请参阅canIuse以获取更多信息

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

有没有任何CSS3规则可以让高度根据宽度改变, 同时保持高宽比

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


可以说你有2个div,outher div是一个容器,inner可以是任何你需要保持它的比例的元素(img或者youtube iframe或者其他)

html看起来像这样:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

可以说你需要保持“元素”的比例,

比率=> 4比1或2比1 ...

CSS看起来像这样

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

当在%中指定填充时,根据宽度而不是高度计算填充。 ..所以基本上你是什么都没有关系你的宽度,它的高度总是会根据这个来计算。 这将保持比例。


只是一个想法或黑客。

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}
<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>


基于你的解决方案,我做了一些技巧:

当你使用它时,你的HTML将是唯一的

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

以这种方式使用它:CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

和js(jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

有了这个,你只需将attr data-keep-ratio为高度/宽度即可。


如果要在纵向或横向视图(尽可能大,但没有粘在外面)上在视口内放置方形,请在方向portrait / landscape上使用vw / vh进行切换:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

对我来说SCSS是最好的解决方案; 使用数据属性:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

例如 :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

source


我已经找到了一种使用CSS的方法,但是您必须小心,因为它可能会根据您自己的网站流量而变化。 我已经这样做了,以便在我网站的流体宽度部分内嵌入具有恒定长宽比的视频。

假设你有这样的嵌入式视频:

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

然后,您可以将这些全部放在一个带有“视频”类的div中。 这个视频类可能是您网站中的流动元素,它本身并没有直接的高度限制,但是当您调整浏览器大小时,它会根据网站流量而改变宽度。 这可能是您可能试图让您的嵌入式视频进入,同时保持视频的特定长宽比的因素。

为了做到这一点,我把一个图像放在“视频”类div内的嵌入对象之前。

! 重要的部分是图像具有您希望保持的正确的宽高比。 此外,请确保图像的大小至少与您期望视频的最小尺寸(或任何您维护AR的尺寸)一样大,以根据您的布局获得。 这样可以避免图像在调整百分比时解决任何潜在问题。 例如,如果您想保持3:2的宽高比,请不要只使用3像素的2像素图像。 它可能在某些情况下工作,但我没有测试它,并且它可能是一个好主意,以避免。

你应该已经有了这样一个最小宽度,就像你的网站流体元素所定义的那样。 如果没有,那么这样做是一个好主意,以避免在浏览器窗口太小时关闭或重叠元素。 某个时候最好有一个滚动条。 网页的最小宽度应在〜600px左右(包括任何固定宽度的列),因为屏幕分辨率不会变小,除非您正在处理电话友好的网站。 !

我使用了一个完全透明的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%来充分利用动态图像提供的不动产。

很酷,呃?

你可能需要花一点时间来处理它,才能使用你自己的设计,但这实际上对我来说意想不到。 总体概念就在那里。


我用了一个新的解决方案。

.squares{
  width: 30vw
  height: 30vw

主要宽高比

.aspect-ratio
  width: 10vw
  height: 10vh

但是,这与整个视口有关。 因此,如果您需要的div是视口宽度的30%,则可以使用30vw,因为您知道宽度,可以使用calc和vw单位以高度重用它们。


正如在w3schools.com这里所述,并在接受的答案中有所重申,填充值的百分比(重点是我的):

指定包含元素宽度百分比的填充

Ergo是保持16:9宽高比的响应DIV的正确示例,如下所示:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

在JSFiddle上演示


由于@ web-tiki已经显示出使用vh / vw ,我还需要一种以屏幕为中心的方式,这里是一个用于9:16肖像的代码片段。

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY会将这个中心保留在屏幕上。 calc(100vw * 16 / 9)预计为9/16的高度。 (100vw * 16 / 9 - 100vh)是溢流高度,因此,上升overflow height/2会使其保持在屏幕中央。

对于风景,并保持16:9 ,你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

如果要先确定高度,则应切换宽度和高度,例如height:100vh;width: calc(100vh * 9 / 16)为9:16肖像。

如果你想适应不同的屏幕尺寸,你可能也会感兴趣

  • background-size封面/包含
    • 以上风格类似于包含,取决于宽高比。
  • object-fit
    • 封面/包含img /视频标签
  • @media (orientation: portrait) / @media (orientation: landscape)
    • 媒体查询portrait / landscape以改变比例。

虽然大多数答案都非常酷,但大多数答案都需要有一个正确尺寸的图片......其他解决方案仅适用于宽度,并且不关心可用的高度,但有时您也希望将内容放入一定高度。

我试图将它们结合在一起,以提供一个完全可移植和可重新定义的解决方案...诀窍是使用自动缩放图像,但使用内联svg元素,而不是使用预先呈现的图像或任何形式的第二个HTTP请求...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}
<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

请注意,我在SVG的宽度和高度属性中使用了较大的值,因为它需要比最大预期大小更大,因为它只能缩小。 这个例子使div的比例为10:5


要添加到Web_Designer的答案中, <div>将具有其所包含元素宽度的75%的高度(完全由底部填充构成)。 这里有一个很好的总结: http://mattsnider.com/css-using-percent-for-margin-and-padding/ : 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请求。





aspect-ratio