图片在width,height固定的div内放大

前言：使用联想浏览器时，看到鼠标悬浮于图片时，图片会逐渐放大，但图片的长度与宽度并未发生改变。

我开始尝试： 

第一次思路：

             利用hover 增大图像的长度和宽度

             transition:使放大效果平缓度过。

            overflow:hidden;

html:

 css:

 

效果：

正常状态下：

当鼠标于图片悬浮时：

效果到这里就实现的差不多了。但是有缺陷：就是当鼠标离开图片后，本应平缓的恢复原状态，但由于width:auto.使其直接恢复 原状态，因此我需要继续改造。

我还得去借鉴一下别人的代码，于是我开始去检查它的代码。

 

第二次思路：

我见他用到了transform:scale(1);  使我猛地想起css的2d转换，利用这个可以把元素增大到原始长度或宽度的几倍。这样就不需要我去 确定图像大小，并在悬浮时增大图片的宽度。只用一个transform：scale（）; 就大功告成了

 

其次

这次：我把a的显示方式改成了  display:flex;   因为它原本的显示方式是inline，非常不适合去往里面添加子元素。 

 

 

 

引申的想法：当我想把图片只往一个方向拉伸，可以去掉overflow：hidden，将其一个方向设为定值，或使用transform：scaleX或scaleY

知识点回顾：

下面借鉴于

  CSS 过渡https://www.w3school.com.cn/css/css3_transitions.asp

1.

2.

 

3.