关于图片自适应方式失效以及解决方案

传统的图片自适应解决方案，样式分为两个部分，一个部分是包裹图片区域的样式，一个是图片的样式。
包裹图片一般采用单元格的td，如下
(width 和 height可自定义大小，vertical-align text-align使内容居中)

.div1 {
        width:300px;
        height:300px;
        border:1px solid black;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

图片的样式如下：
(width 和 height采用auto，使用max-width和max-height使图片可以在固定大小区域自适应显示)

{
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
    }

ok，以上是图片自适应的代码。你在网络上的帖子也可以找到类似的代码。但是这是有问题的。现在的max-height已经失效了

项目场景：

图片区域固定大小，以及图片的自适应显示。
这是一个拍卖会的项目，项目中的拍品列表要求显示固定大小的图片。

问题描述：

今天是2021年7月30号，维护项目代码时发现的问题。图片自适应代码失效，因为max-height不起作用了，max-height：100%，没有取到父级300px的值。但是在这之前是有效的，该项目已上线，在界面显示上是没有问题的。
问题如下，过长的图片，已经把盒子撑开。

解决方案：

然后我特意去查了文档，关于max-height的描述

红线部分：不是绝对定位的元素，百分比值失效。

然后我给图片加了绝对定位，效果如下：

图片已经自适应，但是已经偏离位置，这肯定不是我想要的效果。
然后试着给max-height加固定值或者使用-webkit-fill-available。
fill-availabel的效果是撑满可用空间，但是只可以行内块和块元素有效，
emmm图片就是行内块元素所以问题解决。

解决方案一

给max-height加固定值(对所有浏览器都支持，但是这样怪怪的，图片的最大高度不在由外边的盒子决定而是图片本身的maxHeight)。

解决方案二

给max-height加-webkit-fill-available，这样图片宽高完全由外部盒子决定，但是这是webkit内核的私有属性，像谷歌，QQ，微软等浏览器适用，火狐就不行。

解决方案三

不必纠结于maxHeight，采用背景图的方式。

.div3 {
        height: 300px;
        width: 300px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('http://test2.image.51mars.com/qiniuFile/dev/collection/7204/2021/6/1001-AAAAAAAA056(1).jpg-db_200');
    }

但是要注意,在项目中,你可能将获取到url通过模板字符串引用,像下面这样

<Box
    className={classes.imageBox}
    width={width}
    height={height}
    position={position}
    style={{
        width,
        height,
        backgroundImage: `url(${imageUrl})`,
    }}
>
    {children}
</Box>

如果你的url里有括号像这种http://test2.image.51mars.com/qiniuFile/dev/collection/7204/2021/6/1001-AAAAAAAA056(1).jpg-db_200,那么到浏览器那边就会解析不出来,因为他会在前面的(1)处断掉,这也是我遇到的问题.
所以要换个写法, 在url外边套个"",像下面这样

backgroundImage: `url("${imageUrl}")`,

如果有说错的，欢迎指正，本人菜鸟