How do I extrude a picture when I display a picture thumbnail

In the front of the picture thumbnail, we will encounter the size of the picture, and then use the fixed-ratio img To display the picture, which will cause the picture of the aspect ratio to be extruded and stretched. This paper is to explore the solution of this problem in the perspective of white front. programme one max-width and Max-height

Using Max-width and Max-height, this does not guarantee that each picture preview is the same width, but does not squeeze the extruded picture.

The following figure, two or three pictures of the width and height of the same, no problem, one or four, five or six pictures are obviously squeezed or stretched.

Style:

img {
    width:450px;
    height:450px;
}




 
 
Modified to Max-width and max-height effects:

Style:

img {
    max-width:450px;
    max-height:450px;
}
 
The display of three pictures is more normal, but the height does not reach 450px, but retains a preview of the full picture, this way is a relatively simple solution, if you want to uniform width, then you need to crop the picture. The following scenarios are all programs that involve cropping.

The following three scenarios are shown below:
scenario two uses the cover value of the Background-size property or contain

<div class= "container" ></div>

container {
    width:150px;
    height:100px;
    Background-image:url ("http://i.stack.imgur.com/2OrtT.jpg");
    Background-size:cover;
    Background-repeat:no-repeat;
    background-position:50% 50%
}

. container {
    width:150px;
    height:100px;
    Background-image:url ("http://i.stack.imgur.com/2OrtT.jpg");
    Background-size:contain;
    Background-repeat:no-repeat;
    background-position:50% 50%;
}
 
According to the literal meaning of the word: Cover the background image to large enough to make the background image completely cover the background area. Some parts of the background image may not be visible in the background positioning area. Contain expands the image image to the maximum size so that its width and height are fully adapted to the content area. This approach is similar to the first implementation.

Cover implementation effect:

Contain implementation effect:
Scenario three uses the CSS3 Object-fit property


. Cover {
  Object-fit:cover; Contain
  width:50px;
  height:100px;
}
 
The Object-fit CSS property specifies how the content of the replacement element should fit into the box for the height and width that it uses.
The value of this property has the following types:

Fill: The contents of the element can be filled in by the size of the replaced content box. The entire object will be completely populated with this box. If the aspect ratio of an object does not match the width-height ratio of its box, the object is stretched to fit . The equivalent of fixed width without making any adjustments to the style.

Contain: The replaced content will be scaled to maintain its aspect ratio when populating the element's content box. The entire object retains its aspect ratio while filling the box, so if the aspect ratio does not match the width and height ratio of the box, the object is added " Black edge ." Similar to the contain of the Backgroud-size property, just a black edge.

Cover: The replaced content size retains its aspect ratio while populating the entire content box of the element. If the aspect ratio of the object does not match the width-height ratio of the box, the object is trimmed to fit . Similar to the cover of the Background-size property.

None: The content size being replaced will not be changed.

Scale-down: The size of the content is like specifying None or contain, depending on which one will result in a smaller object size.

The effect of Object-fit:cover:

The effect of Object-fit:contain:
Scheme four container package, set Overflow:hidden

<div class= "container" ></div>
. Container {
    width:300px;
    height:200px;
    Display:block;
    position:relative;
    Overflow:hidden
}

. Container img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
 
Center Picture (jQuery):

var conheight = $ (". Container"). Height ();
var imgheight = $ (". Container img"). Height ();
var gap = (imgheight-conheight)/2;
$ (". Container img"). CSS ("Margin-top",-gap);
 
Effect:
program five Lazy person Essential Jqthumb Library

The function is quite rich, the use is simple, detailed see Jqthumb

The effect that can be achieved: