html5 - How is the height rem of mobile phone adaptive pictures calculated?

Question

The mobile webpage layout is two li and one line occupying the full width

li {
    width: 7.375rem;
    height: 4.5rem;
    float: left;
    margin-left: .4rem;
    position: relative;
}
li img{ width: 100%; height: 4.5rem; display: block; border-radius: .3rem; overflow: hidden; background-color: #fff;}

rem is automatically changed according to the font-size of html.
How to calculate the initial width and height value of this li?

Answer 1

How do you calculate rem?
Tell me my calculation method! The way I calculate it is: (screen width/effect picture width)*100+'px';
For example, the effect picture is 750 and the screen is 375, 1rem=(375/750)*100+'px', which is 1rem=50px
If a picture is 100px wide and 50px high in the rendering; the style setting is img{height:.5rem;width:1rem;}

But what I don’t understand is that if two li’s occupy one line, wouldn’t it be enough to set the li width to 50%?