需求

1. 图片为网络图片非本地图片

2. 图片宽度可能有差异，需要看到不同图片差异

3. 图片相对屏幕居中展示

4. 图片右下角需要标记图片序号

思路

1. 整理分析需求，多张图片垂直居中，考虑使用父容器div居中的方法，容器内的图片都左对齐，这样宽度不一致可以很方便的发现

2. 父容器div居中，需要提前获取到容器宽度，处理方案是获取所有图片宽度，宽度最大值即为父容器的宽度

3. 图片下标使用绝对定位实现

问题

该方案实施时其它部分都是较常规的排版，但计算网络图片获取宽度时，因为不是本地图片无法直接获取宽度，所以需要做特殊处理。使用Image实例的onload函数重新渲染获取宽度，但该方法是异步的，需要一定的技巧处理。

本方案使用递归调用的方式，依次获取所有图片宽度，然后比对获取最大宽度赋值给父容器。

源码

<style>body{margin:0;}img {border: 1px solid green;display: block;}.inner{position: relative;}.inner span{position: absolute;right: 10px;bottom: 10px;color: green;}
</style><div id="wrapper"><div class="inner"><span>图片1</span><img src="https://fileoss.uhongedu.com/ziyuan/sx3gkcc/20210331132815KhfzdZnW.jpg" alt=""></div><div class="inner"><span>图片2</span><img src="https://fileoss.uhongedu.com/ziyuan/sx3gkcc/20210331132815bnEQma4J.jpg" alt=""></div><div class="inner"><span>图片3</span><img src="https://fileoss.uhongedu.com/ziyuan/sx3gkcc/20210331132815Rhy8E6M3.png" alt=""></div>
</div><script src="./js/jquery.min.js"></script>
<script>$(function(){setImgWidth();})// 设置所有图片宽度function setImgWidth(start=0, max_width=0) {let $target = $(`img:eq(${start})`);if ($target.length>0) {let pic = new Image();pic.src = $target.attr("src");pic.onload = function(){let w = this.width / 3 * 2;$target[0].width = w;if (max_width<w) {max_width = w;}$target.parents(".inner").css({"width":w});  // 重置图片尺寸// 最后需要重置父容器宽度为图片最大宽度if (start === $("img").length-1) {$("#wrapper").css({"width":max_width, "margin":"0 auto"});}// 递归处理下一张图片setImgWidth(start+1, max_width);};}}
</script>

效果

CSS设置多张网络图片垂直居中展示相关推荐

CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
设置图片元素上下垂直居中的7种css样式_赵一鸣博客
设置图片元素上下垂直居中的7种css样式阅读(9548) @2018-07-15 14:13:34 图片.文字左右居中很简单,只需要以下代码: 1 text-align:center; 文字上下居中 ...
[css] 如何使用css3实现一个div设置多张背景图片？
[css] 如何使用css3实现一个div设置多张背景图片? background-image:url("1.jpg"),url("2.jpg"),url(&q ...
HTML+CSS之设置元素的水平垂直居中
本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...
[CSS] CSS display:flex实现内容水平垂直居中展示
display:flex实现内容水平垂直居中展示需要增加下面两点就能实现首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...
css设置背景图片模糊，文字清晰展示
css设置背景图片模糊,文字清晰展示使用filter: blur来实现,blur的值越大越模糊效果图: html: <div class="box"><p&g ...
CSS 设置表格格式
在word中,表格是一项很常用的功能,并且表格的样式变化多端,用户可以根据需要选择自己喜欢的样式.那么,各式各样的表格到底是怎么实现的呢? 本节,通过一个简单的表格,来揭开word表格的神秘面纱.表格 ...
常用的几种布局方式---Flex 布局(垂直居中展示）
常用的几种布局方式---Flex 布局(垂直居中展示) 前言一.默认使用静态布局二.flex布局 1.父元素container 1.1.display:flex 1.2.flex-directio ...
html照片与照片之间的间隔,css设置图片之间的间隔的方法
css设置图片之间的间隔的方法发布时间:2021-01-05 09:32:24 来源:亿速云阅读:116 作者:小新这篇文章将为大家详细讲解有关css设置图片之间的间隔的方法,小编觉得挺实用的, ...

CSS设置多张网络图片垂直居中展示

需求

思路

问题

源码

效果

CSS设置多张网络图片垂直居中展示相关推荐

最新文章

热门文章