css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放

效果图如下:

代码实例如下:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title>
<style type="text/css">.one {width:80%;height:120%;/*去掉圆点*/list-style:none;/*居中对齐*/text-align:center;/*将系统自动生成的间隙去掉*/font-size:0;/*相对于body设置位置*/position:absolute;margin-top:100px;margin-left:100px;}.one ul li a {/*相对定位*/position:relative;  /*因为a为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/display:inline-block;/*图片随浏览器的大小自适应缩放，只设置宽度即可*/width:8%;/*使用 padding-bottom 设置高度基于宽度的自适应*/padding-bottom:8%;/*设置一个外边距*/margin:5px;}.one ul li a img {/*绝对定位*/position:  absolute;/*因为img为行内元素不支持宽和高，div为块级元素支持宽和高，所以要将行内元素转换为行内块级元素*/display:inline-block;top: 0;left: 0;width: 100%;height: 100%;}</style></head><body><div class="one"><ul><li>/*这里的图片要跟此html网页放到同一个文件夹下*/<a herf="#"><img src="timg.jpg"></a><a herf="#"><img src="timg.jpg"></a></li></ul></div></body>
</html>

如果要转载的话，请附上博客地址:
https://blog.csdn.net/qq_43290288/article/details/103046856

css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放相关推荐

【HTML5】网页实用技巧3：将方形图片设置成圆形后，添加圆形虚线边框
需要实现的效果:将原本是方形的图片,变成圆形,且添加一个圆形边框实现思路: ①制作一个正方形div盒子,将图片放在div盒子里 ②将div盒子,设置边框样式 ③将盒子设置成圆形(利用 border- ...
[css] 给一个图片设置透明有哪些方式呢？
[css] 给一个图片设置透明有哪些方式呢? 1.opacity : 0 -> 子元素会继承 2.外层用盒子包裹,设置其rgba(255,255,255,0) 个人简介我是歌谣,欢迎和大家一起 ...
004-如何用PS把彩色图片设置成黑白图片？
方法/步骤 1.第1步:首先,打开一张彩色的图片. 2.第2步:然后,鼠标左键点击菜单栏中的[图像]按钮. 3.第三步:最后,在[图像]按钮的下拉菜单中依次点选[调整]-[去色],就可以把彩色图片设置 ...
怎么把http图片改成背景图HTML,web前端：将图片设置成页面的背景-网页页面设置...
如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景! 将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找! 那么为什么今天小编要讲这个呢? 在做一个网页中,如果 ...
css如何把图片设置为黑白_使用CSS将图像转换为黑白图像
css如何把图片设置为黑白 Desaturating a color image couldn't be simpler with CSS. The filter is typically appli ...
html怎么吧图片设置成背景音乐,如何把照片做成视频并添加音乐
如何把照片制作成视频?相信大家都已经有所耳闻了,把平时手机或者相机上拍摄的照片,还有拍摄的视频都可以合起来,再添加背景音乐就成了一个非常有纪念价值的视频了.然而已经不是只有照片和音乐的视频了,整个视频 ...
iOS开发开发笔记，图片裁剪成正方形图片；
/// 裁剪图片,以宽度为标准,裁剪成正方形图片,size = (width,width) - (UIImage *)cutImageWithImage:(UIImage *)image {if (! ...
speedoffice（PPT）怎么将插入的图片设置成背景？
插入到PPT的图片,怎么设置成背景呢? 方法一:用speedoffice打开PPT图像后,在图片上任意位置右键,出现的选项卡里面选择"添加到布局"即可实现将图片设置为背景方法二: ...
CSS 网页背景图片设置
<!DOCTYPE html> <html> <head><meta charset="utf-8"><style>#l ...

css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放

css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放相关推荐

最新文章

热门文章