.d1 { border: 1px solid black; display: flex; width: 300px; height: 300px; }
Why does the image also stretch to the end of the flexbox width? Shouldn't it only extend towards the bottom, like thedivelement does inside the Flexbox container?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can control the maximum width and maximum height of the image to easily solve your problem.
Just use CSS to add
max-widthandmax-heightto the image and then add your own values there.