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

2019独角兽企业重金招聘Python工程师标准>>>

实际图：600px*500px

效果图：

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head>
<style>* {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;}</style><body><div class="box"><ul class='list'><li style="background-image: url(timg.jpeg)"></li><li style="background-image: url(timg.jpeg)"></li><li style="background-image: url(timg.jpeg)"></li><li style="background-image: url(timg.jpeg)"></li></ul></div>
</body></html>

总结：

主要代码：

background-size: cover;

background-repeat: no-repeat;
background-position: center center;

转载于:https://my.oschina.net/u/3549294/blog/1605568

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

html正方形图片倾斜,css控制长方形图片在正方形区域显示，且不变形
方法一:利用新属性: object-fit: cover; 方法二:利用背景图实际图:600px*500px 效果图: 代码: Document * { margin: 0px; padding: ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
用css控制背景图片的位置，大小
引用连接:http://hi.baidu.com/dengdan1025/blog/item/c3463bfba4c3969158ee90d5.html 对于图片,首先我们先想到是背景图片.因为我们许 ...
css3控制html中图片,如何使用CSS控制前端图片HTTP请求
Web前端图片加载的方式多种多样,其所产生的HTTP请求也各异,这里我们就来列举CSS控制前端图片HTTP请求的各种情况示例,需要的朋友可以参考下图片的http请求,有很多种情况,那么究竟什么情况下 ...
html设置图片切割,HTML+CSS实现合并图片的切割显示以及背景渲染
今天用了大约3小时才搞定了这么一小点工作.. 合并图片的切割显示是我早就想研究一下的,因为这个东西应用非常广泛,今天总算在HTML的框架里有了些了解. 核心代码为: div标签是个很好的东西,用来逻辑 ...
css如何让图片全屏显示？
一张清晰漂亮的背景图片能给网页加分不少,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动 ...
css控制背景图片位置-background-position
最近经常给div在加背景图片的时候,发现背景图片的位置总是跟自己想要的效果不一样,所以就粗略的研究了一下,把结果和过程跟大家一起分享一下.现在就用div来举例子,其他的容器也都一样.主要来介绍一下背景 ...
html怎么设置只显示一行,如何利用CSS控制文本只在一行显示(不换行)
我们在做前端时,经常会要求文字只在一行显示.当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?通过CSS中的word-break,white-s ...
CSS控制字体在一行内显示不换行
当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法: 一般的文字截断(适用于内联与块): 1 .text ...

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

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

最新文章

热门文章