at present, we want to achieve a function similar to Weibo thumbnails, with inconsistent width-to-height ratios, so now we need to fully display the pictures in the middle. How can it be achieved without a background map? Too wide picture, stretch height, too high picture, stretch width.
gives you an idea. I don't know what get means without get.
first use js to scale the width and height of the picture, which is relatively easy.
then you can center horizontally and vertically in many ways;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%)
or within flex
margin:auto
Previous: Web website, realize sharing to Qzone, Weibo
Next: Webstrom open JavaScript page code display is not complete