css实现宽高比固定

在保持 item 元素宽高比恒定（如高是宽的 1.5 倍）的情况下，使得 item 元素可以和父元素同比缩放。 我们知道，如果当 item 元素是图片，同时需要保持的宽高比恰好为图片本身的宽高比时，可以设置 item 的 height 为 auto 即可轻松实现这个需求。然而当 item 元素不是图片或者要保持的宽高比和图片本身的宽高比不同（图片规格不统一）时，item 出现凌乱的感觉这个需求显得很难直接用 CSS 实现。

首先需要知道，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。

另外，在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。

综上两条所述，我们可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为 item 元素的宽度是其父元素宽度的 100%，所以我们将 padding-bottom 设置为它的 1.5 倍，即 67%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。

最后 item 元素的 CSS 样式为：

.project-img {position: relative;width: 100%;height: 0;padding-top: 67%;font-size: 0;border: 1px solid rgba(255, 255, 255, 0.1);.logo_url{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;margin: 0 auto;}
}

注意：padding-bottom是按照父元素的宽度比计算的,而不是按高度算,所以这里可以用溢出的padding-bottom来做（padding-top也可以）

css实现宽高比固定相关推荐

css 大图保持宽高比压缩,css 保持宽高比缩放
参考需求简介: 在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸下图效果是div1:1 , 图片宽度100%, 高度自适应思路 1, 使 ...
css设置盒子宽高比固定，高度随着宽度发生变化
第一种方法: css属性:aspect-ratio--盒子的宽高比: 1)它的属性值可为1: 1.2:0.2:1/2; 3/2; 2.2/3.2 2)当然也可以包一个calc(画蛇添足没必要): 3) ...
CSS实现固定宽高比响应式布局（附实例分析）
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 在日常开发过程中,有一些前端业务场景可能需要让元素在尺寸变化的同时,保证宽高比不变,所以在此记录 ...
如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...
css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
照片宽高比怎么设置_自己动手搭建照片墙
前言在这里记录一下制作网页照片墙的过程,当作一个简单的教程,给可能需要的朋友. 去年为了给冬子做一个礼物,我从11月初拖到12月底,硬生生的把纪念日礼物做成了新年礼物,主要问题就是构思到底要把网页做 ...
Android 实现自定义宽高比的ImageView
前言我们为什么要用到宽高比固定的ImageView呢?因为Android屏幕大小不一样,同样一张图片可能会在不同的设备上显示效果不同,会发生拉伸等情况.今天就来说一种解决方案,让图片的宽高比固定,保 ...
【视频压缩】基础知识（一）：一文彻底弄懂分辨率、宽高比
分辨率分辨率指的是图像或者视频的尺寸大小,通常用"宽度*高度"来表示. 像素衡量图像或视频大小的基本单位,像素是很小的色块. 720P P:视频中像素的总行数,720P表示视频 ...
CSS实现元素固定宽高比
概要最近项目中有遇到一种场景需要元素以固定宽高比且元素的宽度占父元素的固定百分比的情况,简而言之就是元素的宽度是随浏览器而变化,元素的高度是随元素的宽度变化的. 实现方式一:使用aspect-rat ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...

css实现宽高比固定

css实现宽高比固定相关推荐

最新文章

热门文章