html图片上下高度不一样,【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致...

折腾：

【未解决】HTML页面中把3张图横向排一排

期间，试了半天，代码：

但是始终是：

最左边图片的高度不对：

去调试看看

发现是：

section的高度都一样，是对的

但是img的高度就不对了

把parent换个位置：

问题依旧。

怀疑是第一张图的位置或高度等属性特殊？

去掉第一张图：

后面2张，是没问题的：

说明：

第一张图片本身有问题？

调整位置后：

结果竟然真的是：

就是图的本身有问题。

去看原图，本身尺寸就不同：

是：

3300×2550

后面2张都是：

3508×2480

算了，直接换原图试试：

结果：

问题依旧：

-》此处，3张图，2张尺寸一样，另外一张不同

即使用图片缩放后，结果此处布局中，还是会导致显示大小不同。很是奇怪。

去换成png图片

结果：

问题依旧。

最后发现是：

第一张本身分辨率是：3300×2550

第二和第三张分辨率是：3508×2480

所以导致第一张图片缩放后，高度和另外2张不一致。。。

另外，也从：

另外某张三合一的图片中，找到原因了：

第一张底部有文字描述，第二和第三张底部没有

看来是作图的人的问题

后记：

换成正常的图，即可：

【总结】

问题：此处html中让3张图横向排列了，但是第一张图的高度比另外2张高，显示上很不协调。

原因：

找到最后发现是：图片本身宽高比例不一致：

第一张图片是：3300×2550

第二和第三张图片分辨率是：3508×2480

解决办法：

让别人给我图(作图的人)，重新制作出图片宽高比例一致的图片

即：

3张图，要么把第一张的宽高弄成(和2，3张一样的)3508×2480，或等比例的

要么把2，3张的宽高比例弄成和第一张的宽高比例一致

即可。

html图片上下高度不一样,【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致...相关推荐

python 微信发送图片失败什么原因_[已解决] Appium-Python 测试聊天时同时发送 9 张图片的问题...
测试的功能模拟微信聊天,测试一次发送 9 张图片,图片是否全部发送成功的功能,未成功的图片左侧出现小感叹号的图标. 我的思路同时选择 9 张图片发送后,获取聊天列表 textview,通过 tex ...
android手机上传不了照片,已解决~ wx.saveImageToPhotosAlbum 方法在部分安卓手机上出现图片保存失败的bug。...
如题,运营曾给出一个问题,小程序分享到朋友圈的功能部分用户出现保存图片失败的情况. 查了下原因出问题的都是android用户. 打日志后发现: 原因是:部分安卓手机调用 wx.downloadFile ...
[已解决]Unity使用WebRequest过程中发生内存问题A Native Collection has not been disposed
问题背景 Unity版本:2021.3.16 在用Unity做一个文字识别的应用,方案是用UnityWebRequest把图片发送给web api,但在发送一定时间后Unity会报错. (具体堆栈信息 ...
【已解决】GO语言开发中调用另一个库报错 cannot refer to unexported name XXXX
问题: 在一个.go文件中定义一个reverse方法用来反转给定的字符串包路径为:E:\goproject\src\ynhmonster.com\user\stringutil package st ...
【已解决】单片机串口通讯中RXD与TXD如何连线？
首先我们需要明白两个概念,就是DTE和DCE.DTE是指数据终端设备,典型的DTE就是计算机和单片机.DCE是指数据通信设备,典型的DCE就是 MODEM. RS232串口标准中的RXD和TXD都是站 ...
【已解决】在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob
今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误: Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'Fil ...
【已解决】烂泥：域中的打印机无法打印……
今天刚上班就碰到这个问题了,一台加入域中的打印机执行打印任务时,没有任何的反应. 由于这个域是我自己在虚拟机中搭建的,目前还处于实验阶段,而且我的另外一个比我早来的同事,很反对域环境.他已经在公司三四 ...
python解析不完全的html_【已解决】Scrapy的Python中如何解析部分的html字符串并格式化为html网页源码...
折腾: 期间,已经可以用scrapy去post某个url得到返回的部分的html的字符串了: {"id":1637788,"title":"Humf ...
【已解决】谷歌Chrome浏览器中如何打开或关闭网页的自动翻译功能?
对于经常查阅各种外文资料的人来说,谷歌翻译插件必不可少.但是今天小编要跟大家说的不是 chrome插件 ,而是chrome自带的网页翻译功能.Chrome有自带整页翻译的功能,这个我相信很对于经 ...

html图片上下高度不一样,【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致...

html图片上下高度不一样,【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致...相关推荐

最新文章

热门文章