CSS——实现图片等比例正方形显示，宫格排列

最新推荐文章于 2023-08-09 15:04:37 发布
最新推荐文章于 2023-08-09 15:04:37 发布
阅读量6.8k 收藏 6
点赞数 2
分类专栏： CSS 文章标签： css 图片 正方形图片 宫格 等比例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yu17310133443/article/details/72674390
版权

像微信朋友圈一样，添加图片的时候，等比例正方形显示在列表中，如何让图片根据宽高来自适应显示在页面上呢？示例如下：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />  
        <style type="text/css">
			.figure-list{
			  margin: 0;
			  padding: 0;
			}
			.figure-list:after{
			  content: "";
			  display: block;
			  clear: both;
			  height: 0;
			  overflow: hidden;
			  visibility: hidden;
			}
			.figure-list li{
			  list-style: none;
			  float: left;
			  width: 23.5%;
			  margin: 0 2% 2% 0;
			}
			.figure-list figure{
				border: 1px solid #000;
			  position: relative;
			  width: 100%;
			  height: 0;
			  overflow: hidden;
			  margin: 0;
			  padding-bottom: 100%; /* 关键就在这里 */
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: cover;
			}
			.figure-list figure a{
			  display: block;
			  position: absolute;
			  width: 100%;
			  top: 0;
			  bottom: 0;
			}
</style>
<ul class="figure-list">
  <li>
    <figure style="background-image:url(1.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(2.png)">
      <a href="#"></a>
    </figure>
  </li>
   <li>
    <figure style="background-image:url(3.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(4.png)">
      <a href="#"></a>
    </figure>
  </li>

   <li>
    <figure style="background-image:url(5.png)">
      <a href="#"></a>
    </figure>
  </li>
  <li>
    <figure style="background-image:url(6.png)">
      <a href="#"></a>
    </figure>
  </li>
</ul>
</html>


Mickey_于浩
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅谈纯CSS实现自适应浏览器宽度的正方形
筱葭的博客
04-13 1万+
1、方案一：CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理 vmax是相对当前视口宽高中较大的一个的百分比单
HTML5仿微信朋友圈图片展示特效代码
03-20
HTML5仿微信朋友圈图片展示代码是一款类似微信客户端点击查看图片切换特效代码。
【CSS实现正方形】CSS实现自适应正方形、等宽高比矩形
heshan1992的博客
09-01 5757
自适应正方形就是在浏览器屏幕大小不一样或者采用小屏设备的时候，正方形要能够自适应的保持宽高比进行缩放，具体的实现有以下几种方式： 一、利用vw、vh、vmin、vmax vw表示的是viewport的宽度，也就是视口的宽度，vh表示的是视口的高度，vmin=min{vw,vh}取的是两者中较小的值，vmax ={vw,vh}，1vm = 1% viewport width其他同理，所以利用上诉的
分享到微信朋友圈的CSS代码
12-11
微信分享，分享图片功能，登录微信，分享到朋友圈子、或者分享到空间里
css微信朋友圈的九宫格图片自适应效果
weixin_52508886的博客
03-13 595
【代码】css微信朋友圈的九宫格图片自适应效果。
CSS——微信朋友圈图片样式实现方法
weixin_30708329的博客
04-25 453
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,targ...
用Python实现将一张图片分成9宫格的示例
09-19
今天小编就为大家分享一篇用Python实现将一张图片分成9宫格的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
css如何实现n宫格布局的方法示例
12-13
在scss环境下, 通过mixin实现n宫格, 并且可以支持"有无边框"和"每个格是否正方形": @include grid(3, 3, true); // 3 x 3, 有边框, 且每个格为正方形 @include grid(2, 5, false, false); // 2 x 5, 无边框 最终...
python简单实现9宫格图片实例
12-17
2、判断打开的图片是否为正方形，如果是正方形，就进行九等分，如果不是正方形，先用白色填充为正方形，再进行九等分 3、保存处理完的图片 主要实现代码如下： # 填充新的 image def fill_image(image):  width...
uniapp实现 图片九宫格、可控制一行显示几个
04-29
使用uniapp 实现图片九宫格、完美动态适配手机各种尺寸、已抽离成组件 只需修改单个字段 实现页面布局、 class="pic-container" :style="{ paddingLeft: spacingNumber + 'px', paddingRight: ...
HTML5仿微信朋友圈样式特效.zip
07-04
html5仿微信朋友圈样式特效是一款基于jQuery HTML5实现的类似微信朋友圈特效代码。
实现微信朋友圈图片自动排列功能
09-29
实现微信朋友圈图片自动排列功能，根据加载的图片多少自动分行和分辨率，排列规则如下： * num row column * 1 1 1 * 2 1 2 * 3 1 3 * 4 2 2 * 5 2 3 * 6 2 3 * 7 3 3 * 8 3 3 * 9 3 3 ps：最大九张图片数量
css如何使图片固定为正方形 div按比例布局，宽度为百分比，但又想让高度和宽度一样，即让div为正方形，怎么做布局呢？
w15228212327_cc的博客
12-17 967
一个元素要为正方形，height = width就可以了 #box { width: 100%; height=width; } 显然这样是不行的；那要怎木样布局呢？ #divBox { width: 100%; height: 0; padding-bottom: 100%; position: relative; border:1px solid #eee; } #divBox img { positi.
css将一张宽度为百分比的图片设置成正方形
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
04-02 2041
使用css很容易将图片设置为正方形，只要宽高相等即可，但如果图片的宽度是一个百分比呢，比如50%，那么就用到了下面的方法了。 <div class="wrap"> <div class="div"> <img src="a.jpg"> </div> </div> <style> .wrap{ w...
html如何用百分百制作正方形,纯CSS实现自适应正方形
weixin_34379088的博客
06-10 667
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？首先，自适应正方形是指宽度和高度随着屏幕宽度(不管是移动端还是 PC 端)进行等比例变化的正方形，在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord的移动页面，而在 PC 端，我们也可能需要实现一个随屏幕宽度变化的正方形，从而达到某些效果；那么应该怎么使...
CSS实现自适应的正方形
寅月星回的博客
04-22 3519
IT修真院CSS任务一：九宫格 需要完成一个自适应的九宫格，格子随窗口大小宽度变化，且不会变形。 格子的宽度用百分比设置即可，那么高度呢？ 方案一：设置垂直方向的padding 在盒模型中，margin、padding的百分比数值是相对于父元素的宽度计算的，所以将padding值设为与width值相同的百分比即可。 .box{ width:50%; height:0;...
CSS如何实现图片等比例缩放不变形
热门推荐
Ronaldouy的博客
10-08 1万+
CSS如何实现图片等比例缩放不变形
html移动端正方形图片,【移动端布局】让图片保持等比例缩放【原创】
weixin_29346059的博客
05-31 458
前端写页面布局时，图片变形是个很令人头疼的问题，手机屏幕分辨率不一样，出来的效果就不一样，下面的代码可以解决这些问题，保持图片在不同分辨率下面也可以让图片不变形1、首先不能给外层列表定高度，用margin或者padding撑开.album-li-pic{height: 0;overflow: hidden;margin: 0;padding-bottom: 100%;}2、img用定位的方式布局,...
css 设置图片的等比例宽高比
最新发布
weixin_68237499的博客
08-09 1508
在响应式网页设计中，保持一致的宽高比，即所谓的长宽比，对于防止布局累积偏移至关重要。在 Chromium 88、Firefox 87 和 Safari Technology Preview 版本中推出了 aspect-ratio 属性，我们有了更直接的方法来实现这一目标。
html四宫格排列
05-27
您可以使用HTML和CSS来创建一个四宫格排列的布局。以下是一个简单的示例代码： HTML代码： ``` <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div> ``` CSS代码： ``` .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .grid-item { background-color: #ccc; padding: 20px; font-size: 30px; text-align: center; } ``` 在上面的代码中，我们使用了CSS的Grid布局来创建四宫格排列。我们首先定义了一个包含四个子元素的父元素`div`，这些子元素将会被排列在四宫格布局中。然后，我们将父元素设置为`display: grid`，这样它就可以使用网格布局。接下来，我们定义了网格的列和行，使用`grid-template-columns`和`grid-template-rows`属性。在这个例子中，我们使用了两列和两行，每个单元格的大小将会自动计算为相等的1fr。我们还使用了`gap`属性来定义单元格之间的间距。最后，我们定义了每个单元格的样式，包括背景颜色、内边距和文本对齐方式。 通过这些代码，您可以创建一个简单的四宫格排列布局。您可以根据需要调整样式和单元格数量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mickey_于浩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值