css保持div等高宽比（css 宽高保持比例）

25-04-06 3

想了解css保持div等高宽比的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于css宽高保持比例的相关问题，此外，我们还将为您介绍关于css–使div保持在带有边距的父div中、css–保持

想了解css保持div等高宽比的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于css 宽高保持比例的相关问题，此外，我们还将为您介绍关于css – 使div保持在带有边距的父div中、css – 保持div高度与宽高比相关、css – 在Web开发中处理多屏幕分辨率和高宽比的策略、css – 在加载图像时保持div高度的新知识。

本文目录一览：

css保持div等高宽比（css 宽高保持比例）
css – 使div保持在带有边距的父div中
css – 保持div高度与宽高比相关
css – 在Web开发中处理多屏幕分辨率和高宽比的策略
css – 在加载图像时保持div高度

css保持div等高宽比（css 宽高保持比例）

那么css如何实现高度height随宽度width变化保持比例不变呢？即给定可变宽度的元素，它将确保其高度以响应的方式保持成比例(即，其宽度与高度的比率保持恒定)。

下面以高宽 2:1 为例，通过2种方式来实现这种效果。

方式一：利用定位实现

.wrapper{
  position : relative;
  background: #ccc;
  width: 10%;
  padding-bottom : 20%;
}
.inner{
  position : absolute;
  top : 0; left : 0; right : 0; bottom : 0;
}
</style>
<div>
    <div>
        这是内容
    </div>
</div>

说明：其中奥妙就在于padding-bottom:20%,padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的DIV呢?答案是绝对定位,所以Wrapper的样式中有position:relative,方便子元素相对Wrapper的左顶点定位.

方式二：利用伪元素

<style>
.wrapper {
  background: #ccc;
  width: 10%;
}
.wrapper::before {
  content: ‘‘;
  padding-top: 200%;
  float: left;
}
.wrapper::after {
  content: ‘‘;
  display: block;
  clear: both;
}
</style>
<div>
    这是内容
</div>

padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。200% 因此表示元素的高度始终为200% 的宽度，创建一个响应正方形。此方法还允许内容正常放置在元素内部。

总结

二种方式实现的效果都一样，大家可以试一下，调整浏览器窗口的大小以查看元素的比例保持不变。

个人推荐使用方法二，这样可以减少div的嵌套。不过方法一的兼容更好

这里推荐一下我的前端技术分享群：731771211，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。

点击：加入

css – 使div保持在带有边距的父div中

我一直在寻找解决这个问题,我没有看到一个很好的答案,为什么会发生这种情况,以及我如何解决它..
基本上我有一个div,我设置为100％的宽度和高度,在里面我有一个像一个broswer标签部分,我添加一个边距和填充到主要区域,当我设置标签div为全宽它粘一些像素,什么是正确的方式来处理与％s和边距/填充玩耍时伸出父母div的子div

<div>
 <center><strong>AMAMAMAMAMAMA</strong> </br>
    <i>AMAMAMA</i>
 </center>
<div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
 </div>
</div>


.appview_fullscreen
{
    width: 100% !important;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
}
.app_ama
{

}
.main_area
{
    border: 1px solid green;
    width: 100%;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
    width: 100%;
}

演示：http://jsfiddle.net/S8RC3/

解决方法

只需从DIV元素中删除100％即可.

DEMO

.main_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    height: 20px;
}

作为块级元素的DIV已经很宽,因为它是父容器.

另外你有一个拼写错误：< / br>应该是< br />,< br />或者< br>

css – 保持div高度与宽高比相关

我正在为我们公司的主要网站建立一个移动友好的网站.视网膜的设计方式大约是2x.我打算做的是将主要内容设置为最大宽度640px,宽度设置为100％.我有一定的背景图像很适合做到这一点.但是随着div的宽度变小,我需要调整高度.有任何想法吗？

这是css：

*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial,sans-serif;}

body {
  margin:0;
  background-color:#fff;
}

.top,.body {
  max-width:640px;
  width:100%;
  margin:0 auto;
}

.top {
  background: white url(images/top.jpg) no-repeat;
  background-size:auto;
  overflow:hidden;
  height:124px;
  max-height:124px;
}

.top ul {
  list-style:none;
  height:100%;
}

.top ul li {
  height:100%;
  float:left;
  display:block;
}

解决方法

我确实找到了一个答案.它增加了一点不客气的标记,但效果很好.
可以在这里找到： http://jsfiddle.net/AdQ3P/

逻辑是在底部的底部.基本上这需要(img_height / img_width)* 100.

编辑这里的代码,所以不依赖于jsfiddle.

<div>
  <div></div>
</div>

.container {
  width:100%;
  max-width:500px;
}

.hero {
  width:100%;
  height:0;
  background-size:100%;
  background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
  padding-bottom:75%;
}

也是一个凌乱的桌子我有哈哈.

css – 在Web开发中处理多屏幕分辨率和高宽比的策略

回到当天，800 x 600是设计的屏幕分辨率 – 也许640 x 480.然后沿着1024 x 768等等，等等。

但是，它变得更糟：现在我们不仅有不同的分辨率，但也有不同的长宽比。

人们使用什么策略来适应当今不断扩大的屏幕尺寸和宽高比范围？

(BTW – 我只考虑笔记本电脑/台式机硬件，但当然有智能手机和平板电脑也考虑)。

解决方法

我知道这将是一个有争议的意见，但我会说它反正：不要

不要设计为多种屏幕尺寸或宽高比。当然有一些例外：web邮件客户端等重型Web应用程序绝对可以使用更多的屏幕空间，并且可能足够灵活以适应大范围的屏幕尺寸。所述网站的移动版本，具有更灵活的设计以容纳移动屏幕尺寸的令人难以置信的频谱可以帮助具有高移动量的站点。然而，如果你坚持所谓的“桌面网络”，那么我想我们可以说，95％的时间有更重要的事情要关心比屏幕尺寸，分辨率和宽高比。

首先，让我们来解决一个简单的问题。我不太明白你为什么会关心这么多的长宽比 – 这不是我们关心的那么多的’下面的折’废话了，我们吗？网络是一种垂直介质 – 滚动将总是在网站上有一个地方。拥有一切以上的神奇600px线是只是愚蠢。

接下来，屏幕分辨率/大小：再次，我觉得很难防守。

大屏幕的用户通常不会最大化他们的浏览器窗口，因为他们发现大多数网站不利用他们。当网络适应用户时，用户也适应网络。虽然你可以认为这是一个鸡和鸡蛋的问题，事实仍然是，网站通常设计为最低的共同标准。我不是捍卫这个立场，而是指出它是当前流行的趋势。

有一些事情，根本不会工作与分辨率太高或太低。例如，存在允许人们在屏幕上舒适地阅读的宽度的小范围。任何更长的时间和眼睛移动到下一行将是恼人的。太低，文本会显得狭窄。网络被设计成解决中立的事实意味着矛盾的是，没有为那些希望建立流体布局的人提供许多条款。最小高度和最大高度将有所帮助，当然，但范围更广，你会面临更多的困难。例如孤立的元素，移位的图像，用完的背景等，对于用当今技术构建的真正灵活的站点是不可避免的。

所以我的意见是，处理多个决议的最简单的方法是完全忽略它 – 今天的技术有没有很多选择，并设计最低的共同标准。

css – 在加载图像时保持div高度

我在.img容器内有一个正方形的图像.有时,加载图像需要几秒钟,而.img容器崩溃,并且只有在图像加载时才需要完整的高度.但是,我希望在图像加载时保持完整的高度(如图像所在).

我可以通过在img-container类中设置最小高度来轻松完成此任务,但它是一个流畅的网格,图像响应(通知引导程序的img响应帮助器类),这使得很难将最小高度设置为适用于不同屏幕尺寸的值(尽可能使用媒体查询作为最后手段).
通过放置地方图像来解决这个问题,听起来像是一个过度的杀手(特别是在手机上表现明智).此外,不确定先加载什么,占位符图像或实际图像.

<div>
    <div>
      <span>
        <img altsrc="http://...">
      </span>
      <div>
        <a href="http://..">
          Some text
        </a>
      </div>
    </div>
  </div>

解决方法

编辑评论

如果您根本没有指定源代码(甚至不是虚拟的),浏览器甚至不会尝试“猜测”图像的高度,因此它会崩溃.如果你知道图像的比例(在一个正方形图片的情况下显然是1：1),你可以使用下面的技巧来关注空间,并将图像与div缩放.

设置以下CSS：

.test-div-inner {
    padding-bottom:100%;
    background:#EEE;
    height:0;
    position:relative;
}
.test-image {
    width:100%;
    height:100%;
    display:block;
    position:absolute;
}

然后可以使用以下HTML：

<div>
    <imgsrc="http://goo.gl/lO9SUU">
</div>

这是工作示例：http://jsfiddle.net/pQ5zh/3/

请注意,小提琴包含另一个div元素,只有当您想要给它所有的填充或边框时才需要这个元素,因为padding-bottom会根据div的宽度来计算填充(以像素为单位),包括这些参数,这不是我们想要实现的效果(图像会比它应该高一点).

对于非正方形图像：

如果您想要更改图片的比例,只需更改容器div的padding-bottom.例如,如果要放置比例为2：1的图像,请将填充更改为50％.为了保持简短：容器div的宽度和填充的比率应该总是等于图像的宽度和高度的比率.

有一个简单的方法来做到这一点,但它只适用于正方形图像.
将图像的宽度(使用CSS)指定为100％.这样浏览器会自动假定图像的高度与宽度相同,并且占据该位置.

http://jsfiddle.net/pQ5zh/2/

.test-image {
    width:100%;
}

注意：有一种方法可以实现非正方形图像,但这有点复杂.

编辑：见上文.

今天关于css保持div等高宽比和css 宽高保持比例的介绍到此结束，谢谢您的阅读，有关css – 使div保持在带有边距的父div中、css – 保持div高度与宽高比相关、css – 在Web开发中处理多屏幕分辨率和高宽比的策略、css – 在加载图像时保持div高度等更多相关知识的信息可以在本站进行查询。

本文标签：