Image reduction and image positioning_html/css_WEB-ITnose

I want to make a thumbnail, but the full image thumbnail is too small.
Just shrink it to a suitable size and use overflow to cut out the display size.
But the positioning of the picture starts from the left. Some of the pictures The information has also been cut out
Please give me some advice

.post{float: left;width: 210px;height: 150px;overflow:hidden;background-color: #fff;margin: 10px 0px 0px 10px;}.post img{max-width: 300px;max-height: 167px;}

The effect is as follows

Reply to the discussion (solution)

Set the relative positioning of the div used for cropping: position:relative;
Then set the absolute positioning of the reduced image, then you can display the area you want by controlling the left or top of the positioning, and the extra area is Cropped by a div

Set the relative positioning of the div used for cropping: position:relative;
Then set the absolute positioning of the reduced image, then you can display it by controlling the positioning left or top The area you want, and the excess area will be cropped by the div

Correct solution

Set the relative positioning of the div used for cropping position:relative;
Then Set the absolute positioning of the reduced image, then you can display the area you want by controlling the positioning left or top, and the excess area will be cropped by the div

Correct answer