css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放
生活随笔
收集整理的這篇文章主要介紹了
css怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
效果圖如下:
代碼實例如下:
<!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;/*將系統(tǒng)自動生成的間隙去掉*/font-size:0;/*相對于body設置位置*/position:absolute;margin-top:100px;margin-left:100px;}.one ul li a {/*相對定位*/position:relative; /*因為a為行內(nèi)元素不支持寬和高，div為塊級元素支持寬和高，所以要將行內(nèi)元素轉換為行內(nèi)塊級元素*/display:inline-block;/*圖片隨瀏覽器的大小自適應縮放，只設置寬度即可*/width:8%;/*使用 padding-bottom 設置高度基于寬度的自適應*/padding-bottom:8%;/*設置一個外邊距*/margin:5px;}.one ul li a img {/*絕對定位*/position: absolute;/*因為img為行內(nèi)元素不支持寬和高，div為塊級元素支持寬和高，所以要將行內(nèi)元素轉換為行內(nèi)塊級元素*/display:inline-block;top: 0;left: 0;width: 100%;height: 100%;}</style></head><body><div class="one"><ul><li>/*這里的圖片要跟此html網(wǎng)頁放到同一個文件夾下*/<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怎样将图片设置成正方形，而且随着浏览器窗口大小的改变而自适应缩放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： top,right,bottom,lef
- 下一篇： padding-bottom属性的作用