最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致

图片 crifan 119浏览 0评论
折腾:
【未解决】HTML页面中把3张图横向排一排
期间,试了半天,代码:
                                <div class="box alt">
                                    <div class="row gtr-uniform">
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary.jpg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_color.jpg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_edit.jpg" />
                                        </section>
                                    </div>
                                </div>
但是始终是:
最左边图片的高度不对:
去调试看看
发现是:
section的高度都一样,是对的
但是img的高度就不对了
把parent换个位置:
                                <div class="box alt">
                                    <div class="certificate_image_parent row gtr-uniform">
                                        <section class="col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary.jpg" />
                                        </section>
                                        <section class=" col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_color.jpg" />
                                        </section>
                                        <section class=" col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_edit.jpg" />
                                        </section>
                                    </div>
                                </div>
问题依旧。
怀疑是第一张图的位置 或 高度等属性 特殊?
去掉第一张图:
                                        <!-- <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary.jpg" />
                                        </section> -->
后面2张,是没问题的:
说明:
第一张图片本身有问题?
调整位置后:
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_color.jpg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_edit.jpg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary.jpg" />
                                        </section>
结果竟然真的是:
就是图的本身有问题。
去看原图,本身尺寸就不同:
是:
3300×2550
后面2张都是:
3508×2480
算了,直接换原图试试:
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_color_origin.jpeg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_edit_origin.jpeg" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary_origin.jpeg" />
                                        </section>
结果:
问题依旧:
-》此处,3张图,2张尺寸一样,另外一张不同
即使用图片缩放后,结果此处布局中,还是会导致显示大小不同。很是奇怪。
去换成png图片
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_color_origin.png" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_intermediate_edit_origin.png" />
                                        </section>
                                        <section class="certificate_image_parent col-4 col-6-medium col-12-xsmall">
                                            <img class="certificate_image" src="images/davinci_certificate_primary_origin.png" />
                                        </section>
结果:
问题依旧。
最后发现是:
第一张本身分辨率是:3300×2550
第二和第三张分辨率是:3508×2480
所以导致第一张图片缩放后,高度和另外2张不一致。。。
另外,也从:
另外某张三合一的图片中,找到原因了:
第一张底部有文字描述,第二和第三张底部没有
看来是作图的人的问题
后记:
换成正常的图,即可:
【总结】
问题:此处html中让3张图横向排列了,但是第一张图的高度比另外2张高,显示上很不协调。
原因:
找到最后发现是:图片本身宽高比例不一致:
第一张图片是:3300×2550
第二和第三张图片分辨率是:3508×2480
解决办法:
让别人给我图(作图的人),重新制作出图片宽高比例一致的图片
即:
3张图,要么把第一张的宽高弄成(和2,3张一样的)3508×2480,或等比例的
要么把2,3张的宽高比例弄成和第一张的宽高比例一致
即可。

转载请注明:在路上 » 【已解决】HTML图片横向布局中第一张图片和其他图片高度不一致

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.140 seconds, using 20.82MB memory