图片等比例缩放问题

今天在做公司的一个年终总结的时候遇到这么一个问题,要求是外层父级盒子,宽为1000px,居于页面中部,里面有两张图片,要求是横向刚好占满盒子。两张图片的尺寸分别是left_on:524*259,right:535*259,结构代码如下:






Document








结果发现页面成了这个样子
图片等比例缩放问题_第1张图片
明明一样高的图片却不一样高了,想了却没想出问题所在,后来试了一下用弹性盒解决了


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .wrap{
            width: 1000px;
            margin: 0 auto;
            display: flex;

        }
        .wrap img{
            width: 500px;
            /* float: left; */
        }
    style>
head>
<body>
    <div class="wrap">
        <img src="left_on.png" alt=""><img src="right.png" alt="">
    div>
body>
html>

展示的效果成了需要的样子,图片宽高为500*259
图片等比例缩放问题_第2张图片
但是解决是解决了,却没有找到问题所在,后来又研究了发现两张图片的高虽然都是259,但是宽却是不一样的,也就是其实他们各自的宽高比例是不一样的,而img的宽设置之后他们对应的高也会等比例缩放,所以显示出来的效果就是明明之前一样高的图片却变得不一样高了。

你可能感兴趣的:(图片等比例缩放问题)