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

<div style=”width: 200px; height: 200px; background:url(./img/text.png) no-repeat;background-size: cover;background-position:center;overflow:hidden; “>
</div>

Answer 1:
<div style="width: 200px; height: 200px; font-size: 150px;">
  <img src="./test.png" alt="" style="max-width: 200px;max-height: 200px;">
</div>

Answer 2:

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

Answer 6:

@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)">

Answer 7:

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.

Answer 8:

Come and see this.

<img style="width: 200px;height:200px;display:inline-block;background:url(./img/text.png) no-repeat 0 0 / cover;">

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *