html正方形图片倾斜,css控制长方形图片在正方形区域显示，且不变形

方法一：利用新属性：

object-fit: cover;

方法二：利用背景图

实际图：600px*500px

效果图：

代码：

Document

* {

margin: 0px;

padding: 0px;

}

ul,

li {

list-style-type: none;

}

.box {

width: 1200px;

margin: 30px auto;

display: table;

}

.list li {

position: relative;

float: left;

width: 300px;

height: 300px;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

}

.list li:before {

content: '';

position: absolute;

width: 100%;

height: 100%;

border: 1px solid red;

}

三：利用transform:translate

html:

css:

.image{

position: relative;

overflow: hidden;

width: 100px;

height: 100px;

border-radius: 4px;

}

.image img{

width: auto;

height: 100%;

position: absolute;

-o-object-fit: cover;

object-fit: cover;

width: 100%;

height: auto;

min-width: 100px;

min-height: 100px;

max-width: none;

max-height: none;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

}

总结：

主要代码：

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

html正方形图片倾斜,css控制长方形图片在正方形区域显示，且不变形相关推荐

css控制长方形图片在正方形区域显示，且不变形
2019独角兽企业重金招聘Python工程师标准>>> 实际图:600px*500px 效果图: 代码: <!DOCTYPE html> <html lang=&q ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
img 错误样式css,css设置图片大小_css 控制img图片的大小样式
摘要腾兴网为您分享:css 控制img图片的大小样式,掌上财富,优品多多,问作业,淘客联盟等软件知识,以及手机游戏开挂神器,au补丁,局域网监测,苹果录屏专家,重复文件删除,易通教育,章鱼输入法,爱 ...
用css控制背景图片的位置，大小
引用连接:http://hi.baidu.com/dengdan1025/blog/item/c3463bfba4c3969158ee90d5.html 对于图片,首先我们先想到是背景图片.因为我们许 ...
css3控制html中图片,如何使用CSS控制前端图片HTTP请求
Web前端图片加载的方式多种多样,其所产生的HTTP请求也各异,这里我们就来列举CSS控制前端图片HTTP请求的各种情况示例,需要的朋友可以参考下图片的http请求,有很多种情况,那么究竟什么情况下 ...
html图片纵向排列代码,竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法...
先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形. 一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间) ...
css控制背景图片位置-background-position
最近经常给div在加背景图片的时候,发现背景图片的位置总是跟自己想要的效果不一样,所以就粗略的研究了一下,把结果和过程跟大家一起分享一下.现在就用div来举例子,其他的容器也都一样.主要来介绍一下背景 ...
html设置使图片自动移动,css怎么移动图片？
css3功能非常强大,几行代码就可以做到非常不错的移动效果,下面我们来看一下css怎么移动图片,下面我们以图片沿x轴移动为例来看一下css移动图片的方法. 下面我们来看一下css设置鼠标放到图片上时图 ...
css禁止图片保存,CSS中的图片保存方法
"css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...

html正方形图片倾斜,css控制长方形图片在正方形区域显示，且不变形

html正方形图片倾斜,css控制长方形图片在正方形区域显示，且不变形相关推荐

最新文章

热门文章