Zblog uses css to define the size of thumbnail without deformation

zblog In ytcms Many effects can be achieved with the two plug-ins of minitu, such as the two effects on the home page of the website, as shown below:

Here comes the question of how to set this thumbnail The size should also ensure that the picture does not deform.

The background of the minitu plug-in can set the image size, which can certainly solve the problem, but if a website When thumbnails are used in several places and the size of thumbnails is different, we need to think of another way.

What I like to use is the definition of css (there are other methods, of course) to share my personal experience.

The image code called by minitu is

 <a href="****" target="_blank" title="****"><img src="****" alt="****" /></a>

If you directly use css to define the size of img, another problem will arise. Many of the pictures in the blog are arbitrary, and not all of them are cut with the drawing software first. If you directly use css to define the width and height of img, the picture will be deformed again. My idea is as follows:

Use a div to put the image code inside. If you use too many div tags, you may get confused. So I'm used to using<i></i>tags to put the image code inside. Define the CSS of<i>. The code is as follows:

 <i id="tu"><a href="****" target="_blank" title="****"><img src="****" alt="****" /></a></i>

Css is defined as follows:

1. Define the height and width of the<i>, beyond hiding.

2. The width of the defined img is the same as that of the<i>. The height is not defined. The complete css code is as follows:

 #tu { display: block; height: 106px; width: 144px; overflow: hidden; } #tu img { width: 144px; }

This will not distort the picture and make it look more comfortable. If there are several calls like this, change the name of the ID, and then change the width and height of<i>and the width of img under different IDs.

I hope it will be helpful to everyone. If you think this definition is not good, you are welcome to correct it.