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?
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
<div style=”width: 200px; height: 200px; background:url(./img/text.png) no-repeat;background-size: cover;background-position:center;overflow:hidden; “>
<div style="width: 200px; height: 200px; font-size: 150px;"> <img src="./test.png" alt="" style="max-width: 200px;max-height: 200px;"> </div>
cssIt seems that img can not be directly tailored to the background, and can be replaced by JS or simulation.
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.
Try using the clip attribute of CSS
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
@lafang @Drowning fish
<div style="width: 200px; height: 200px; font-size: 150px;background-position:center;overflow:hidden; "> <img src="./test.png" alt="" style="max-width: 200px;"> </div>
The second, citing the @smallmarkone answer
<img border="0" src="./test.png" style="position:absolute;clip:rect(10px 110px 200px 10px)">
imgThe outer set of a container div, set wide, IMG horizontally in the div, and then div set overflow:hidden; but this can only be applied to the picture size larger than the div container’s height.
Come and see this.
<img style="width: 200px;height:200px;display:inline-block;background:url(./img/text.png) no-repeat 0 0 / cover;">