How does CSS achieve fixed picture ratio short edge cutting

Article From:https://segmentfault.com/q/1010000011131511

Question:

I want to write the width and height of dead pictures, such as 200px, but at the same time, I do not want pictures to be distorted. Is there any way to cut it according to the short edge of the picture? For example, there is a picture of 400600I hope he can cut it into 400400The more out part is not needed, then scale to 200*200 and put it into my container.cssCan it be realized?

Answer 0:

Thank you for your brainstorming. At last, I summed up your thoughts and finally found the best solution. Write it out and look at Kazakhstan

cssIt seems that img can not be directly tailored to the background, and can be replaced by JS or simulation.

Answer 3:

cssCan only be able to hide the blind eye.Your need, it feels like you want to regenerate a square cut in the middle of a short edge. Seven Niu’s image processing can help you.

Answer 4:

Try using the clip attribute of CSS

Answer 5:

The outer layer of a fixed width and height div, inside the picture, picture fixed width, height self-adapting, the outer layer of div beyond the part hidden. If you want to display the middle part of the picture in it, use the background map, background-position:center;I don’t know if it’s the effect you want