css实现宽高按比例拉伸

最新推荐文章于 2024-07-18 17:34:14 发布
最新推荐文章于 2024-07-18 17:34:14 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： css 文章标签： css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38036198/article/details/120472888
版权

场景

开发中等宽列表开发经常会使用flex进行宽度的自适应。但为了在大屏时不至于只变化宽度，UI提出需要列表每一项宽高自适应。

解决思路

这么简单的需求，肯定不考虑使用js来监听宽度拉伸设置高度，成本太高，所以优先考虑如何从css入手。
1.是否有属性直接设置宽高比？
2.是否有哪些属性是根据宽度而变化的？

解答方案

  • 是否有属性直接设置宽高比？

答案是有的，这个属性是：aspect-ratio，MDN对于这个属性的解释是：

aspect-ratio CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

我们可以直接使用这个属性设置每个item中的宽高比，用法：

// aspect-ratio: 设计图的宽高比例
aspect-ratio: 16 / 9

但这个属性是个新特性，在IE中并不支持，需要考虑其兼容性，所以不推荐。
下面是其兼容性截图：

最低0.47元/天 解锁文章
明明很开心_l
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 设定宽高比例,css 不规整元素的宽高等比例
weixin_34146759的博客
08-03 484
不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。需求设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:bootstrap 栅格系统思路每个图片区域宽度为父元素宽度的25%，图片的宽度设置100%，其高度根据宽度等比例自动缩放(小加以为图片...
CSS纵向拉伸或随意放大缩小字体的宽高比例
07-17
首先，我们要明白，常规情况下，CSS中的`font-size`属性用于设置文本的大小，而字体本身的宽度和高度比例（宽高比）是固定的，这使得文字在放大时会按比例缩放，不会出现明显的拉伸效果。但如果我们想要实现纵向拉伸...
纯Css实现Div高度根据自适应宽度（百分比）调整
11-20
在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。 要实现这种功能（div的高度：宽度=1:1），通过各种加Buff，得知有以下几种处理方式 1，直接指定div的宽高+zoom来实现自适应 div{width:50px;heigth:50px;zoom:1.1;} 这样
css按照宽高比例写
qq_38402659的博客
02-26 447
overflow: hidden; height: 0; padding-bottom: 20%; width: 100%
【转】纯 CSS 实现高度与宽度成比例的效果
08-27 384
先来演示页面：Demo; 转的内容： 最近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。 item 元素的 CSS 定义如下： .item { float: left; margin: 10px 2%; width: 21%; } 这时遇到...
css 设置宽高比例的方式
文杰的博客
07-23 4006
动态rem: https://blog.csdn.net/weixin_49088636/article/details/128798911?这样也可以做到宽高等比，通常用于响应式或大屏开发中，如果有需要，还要将rem做为动态尺寸。利用padding的特性，padding的计算方式是以父级的宽度进行计算的，如果父级没有，则向上继续寻找，找不到则已屏幕宽为准。此属性可直接在元素上设置宽高比，但存在兼容性问题，可在手机端使用。我们可以通过这一属性进行计算。
CSS宽高等比布局
zhaoolee的CSDN博客
03-10 304
宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是父级宽度的50%,根据css规范, padding用百分比表示的话, padding: 100%等于父元素的宽度); 为什么不直接`width: 50%; height: 50%;? 那样高度就成了父级高度的50% (不...
CSS-使用Flex实现元素以宽高比缩放
Moon Star
08-10 2931
问题：元素宽度随着浏览器改变时， 高度仍然保持不变，致使内部图片变形； 上下padding的值，相对于最近父级的宽 2：flex布局，未设置高的具体值的时候，其值等于子级内容最大的高度 3: 伪类，content为空，宽高为0，不占据位置，也不产生多余的标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css定宽高比 flex + 伪类 + p
vue实现图片按比例缩放问题操作
10-14
当需要将图片按比例缩放时，首要任务是获取图片的原始宽高比例。在给定的示例中，通过创建一个新的`Image`对象，并将其`src`属性设置为图片URL，可以预加载图片。当图片加载完成（即`onload`事件触发）后，可以计算...
css轻松实现固定比例的块级容器
12-13
这种方法的优点在于，即使后端返回的图片比例与预期不符，也可以通过CSS调整容器的宽高比，确保横幅始终展示为2:1的比例。这种方法不仅适用于图片，还可以应用于任何需要固定比例的块级元素，如视频、背景色等。 总...
完整版近在眼前－自定义字体宽、高比例（可任意拉伸字体）.rar
06-17
通过"完整版近在眼前－自定义字体宽、高比例（可任意拉伸字体）"这个资源，用户可以学习到如何有效地控制字体尺寸，以及在各种项目中实现个性化字体设计的方法。无论是网页设计、移动应用开发还是桌面应用程序界面...
一个微小的模块以帮助用纯CSS实现保持宽高比
08-08
标题中的“一个微小的模块以帮助用纯CSS实现保持宽高比”指的是在Web开发中，使用CSS来实现元素的宽高比不变的技术。在网页设计中，保持元素的宽高比是至关重要的，特别是在处理图片、视频或自定义图形时。这个微小...
(转)css实现盒子高度随宽度等比例缩放的四种方式
CaseyWei
03-15 818
前提：先去下margin,padding,方便看效果 *{ margin:0; padding:0 } 方法一：定位 css .container { background-color: silver; width: 100%; position: relative; display: inline-block; } .dummy { margin-top: 100%; } .content { position: absolut...
CSS百分比布局
热门推荐
Sally的博客
01-07 1万+
百分比是一种相对于包含块的计量单位。 首先知道百分比的宽度： 目标元素宽度/父级元素宽度=百分比宽度 在说到百分比是前，先简单了解下基本的单位 英寸（inch） ：in 1 in=2.54cm 厘米（centimeter）：cm 毫米（millimeter）：mm 磅（point）：pt 1pt=1/72 in 皮卡（pica）:pc 1pc==12 pt 像素（
使用css保持一定宽高比例
weixin_30588827的博客
07-16 224
需求描述：移动端实现横跨页面半圆。（类似问题，实现4x4的正方形网格） 简化问题，我们可以理解为实现一个高度和宽度比为1:2的块。 需要解决问题： 　　　　　　　1，高度和宽度按照一定比例。 　　　　　　　2，外容器高度和宽度不确定。 　　　　　　　3，尽量不使用图片和脚本替代。 　　　　　　　4，兼容移动端。 编写html <div class = "semicir...
【css3】伸缩盒子
weixin_42705570的博客
02-21 443
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;伸缩布局&amp;lt;/title&a
Flex布局
xcxiang的博客
03-25 362
https://zhuanlan.zhihu.com/p/25303493 https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb http://www.ruanyifeng.com/blog/2015/07/flex-examples.html https://juejin.im/post/5ac2329b6fb9a028bf057caf https://...
DIV的高度自动拉伸（height属性）…
weixin_30852419的博客
10-30 1586
#mainbody{ .. min-height:400px; *min-height:400px; height:auto; *height:400px; } 以上CSS在IE 6.0，FireFox下可以实现Div高度根据内容自动拉伸，IE6下当Div高度大于400px时，Div会自动拉伸。 但在IE7下却无法实，其原因就是*height:400px;在IE7下不在自动拉伸，而是变...
CSS实现从上往下过渡效果
最新发布
Rverdoser的博客
07-18 151
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css背景图片全屏铺满不拉伸
09-11
### 回答1： 要让 CSS 背景图片全屏铺满而不拉伸，可以使用 `background-size: cover` 属性。这个属性会自动调整背景图片的大小，使得图片完整地覆盖整个容器，同时不拉伸图片。例如： ``` body { background-image: url(your-image-url.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; } ``` 这样，背景图片就可以全屏铺满且不拉伸了。 ### 回答2： 要实现CSS背景图片全屏铺满且不拉伸可以使用以下方法： 1. 使用background-size属性： 在CSS中，可以使用background-size属性来设置背景图片的大小。通常，我们可以将其设置为cover，以使背景图完全覆盖背景区域，同时保持图片的比例不变。这样，背景图片可以全屏铺满，但可能会被裁剪。 例如： ``` body { background-image: url("背景图地址"); background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed; } ``` background-repeat属性设置为no-repeat可以禁止背景图重复出现，而background-position属性将其设置为居中显示。同时，使用background-attachment: fixed属性可以固定背景图，使其随页面滚动而滚动。 2. 使用background-position属性和vw、vh单位： 使用background-position属性结合vw和vh单位，可以根据视口的宽度和高度设置背景图的位置，实现全屏铺满效果。 例如： ``` body { background-image: url("背景图地址"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: auto; } @media (max-aspect-ratio: 16/9) { body { background-size: 100vw auto; } } @media (min-aspect-ratio: 16/9) { body { background-size: auto 100vh; } } ``` 通过@media媒体查询，可以根据视口的长宽比例设置合适的背景图大小。在上述示例中，背景图会根据视口的宽高比例设置为100vw自动高度或者自动宽度100vh。 综上所述，以上两种方法可以实现CSS背景图片全屏铺满而不拉伸的效果。 ### 回答3： 要将CSS背景图片全屏铺满但不拉伸，可以使用CSS3的background-size属性和background-position属性。以下是一种实现方法： 首先，在CSS样式中设置背景图片的路径，例如： ```css body { background-image: url("path-to-image.jpg"); } ``` 然后，使用background-size属性设置背景图片的尺寸，将其调整为cover，即将图片缩放以填充整个容器，但保持其纵横比： ```css body { background-size: cover; } ``` 接下来，使用background-position属性设置背景图片的位置为中心，即将其放置在容器的中央： ```css body { background-position: center; } ``` 最后，将容器的高度和宽度设置为100％，以使背景图片铺满整个屏幕： ```css html, body { height: 100%; width: 100%; } ``` 以上方法可以确保背景图片在保持纵横比的同时填满整个屏幕，不会出现拉伸的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值