css 大图保持宽高比压缩,css 保持宽高比缩放

参考

需求简介:

在大的div中放九个小div, 小div需要保持4:3的宽高比, 小div中会有图片, 图片按照4:3拉伸

下图效果是div1:1 , 图片宽度100%, 高度自适应

思路

1, 使用padding-bottom / padding-top 计算值时使用父元素的宽度来生成宽高比固定的div, 但此时该div高度为0

值

描述

length

规定以具体单位计的固定的下内边距值，比如像素、厘米等。默认值是 0px。

定义基于父元素宽度的百分比下内边距。此值不会如预期地那样工作于所有的浏览器中。

inherit

规定应该从父元素继承下内边距。

2, 使用绝对定位拉伸子元素宽高

3, 对于图片进行拉伸

export default {

name: "app"

}

.box-wrap {

border: 1px solid black;

margin: auto;

display: flex;

height: 60vh;

width: 40vw;

flex-wrap: wrap;

padding: 2px;

box-sizing: border-box;

justify-content: center;

align-items: center;

}

.box {

width: 30%;

height: 0;

padding-bottom: 30%;

box-sizing: border-box;

margin: 2px;

background: gray;

position: relative;

}

.img-wrap{

position: absolute;

left: 0;

right: 0;

top:0;

bottom: 0;

display: flex;

justify-content: center;

align-items: center;

}

.img {

width: 100%;

margin: auto;

}

css 大图保持宽高比压缩,css 保持宽高比缩放相关推荐

gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
webpack4--提取css到单独文件并且压缩css
提取css到build/css目录下:mini-css-extract-plugin插件压缩css:optimize-css-assets-webpack-plugin插件 Uglify是压缩js: ...
css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
webpack3.0 压缩css 但是不在html中引用,webpack怎样压缩css？
Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack. webpack可以使用css压缩插件 ...
webpack怎样压缩css？
webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack. webpack可以使用css压缩插件 ...
css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
将多张图整合到一张大图中，再用css定位技术
2019独角兽企业重金招聘Python工程师标准>>> 以前做网站的时候,经常有地方要用小图标.第一次接触bootstrap的时候,下载打开它的源文件的时候只看到了两张图,就是包含很 ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...
php 使用压缩css文件,PHP-使用GZIP压缩静态CSS文件
所以我有一个CSS文件style.css.在同一目录中,我有images /文件夹. 如何制作一个从另一个文件夹压缩style.css的脚本? 现在我有这个: if(isset($_GET['css' ...

css 大图保持宽高比压缩,css 保持宽高比缩放

css 大图保持宽高比压缩,css 保持宽高比缩放相关推荐

最新文章

热门文章