About image processing (drawing on CSS Mastery)

See the mastery of the CSS in the processing of the image of the three kinds of processing, it is very interesting, I did not notice the problem before!

　　Three ways to treat images and differences:

　　The first type:

For images that need to span large areas, consider directly using the form of a background image to be added to the element.

As follows:

HTML Layout:

<id= "branding"></div>

Its style:

1{2            height: 171px;  3            background: url (.. /img/branding.png) No-repeat left top; 4         }

Detail: The overall width of the picture is: 1600*171

Analysis: The image is set to the background of the Div, then the effect is displayed according to the width of the div is displayed, if the width of the div is smaller than the original width of the image, then the right image will be "cropped" off.

The second type:

The image needs to be used as an image element on the page, that is, the image is nested in the div by the tag img.

As follows:

The HTML layout is:

1  <  ID= "branding">2     <src =".. /img/branding.png "  width=" " height=" 171"/>
3  </div>

The style is:

{            width:100%;             Overflow: hidden;        }

Details: Image width is higher than the above, so there is no need to add the width height attribute in the IMG tag, because the default is the width of the image itself.

Analysis:

This way of processing the image, no matter how to set the div width, the picture is displayed by the default width of the picture, if you want to set the div size so that the picture is the same as the div size, then the div can be overflow:hidden; At this point, the same as the first way to display the effect If, at this point, you want to set the image wide, then there are several situations: 1. Only the width/height is set, then the image height/width is scaled, the image is compressed/enlarged when the effect is displayed, and the effect of "cropping" is different; 2. The width and height are set, resulting in image distortion.

　　The third type:

The image changes with the page, resulting in an adaptive effect. Note that you do not set the width height of the image parent element, and make the image adaptive by setting the percent width.

As follows:

HTML Layout:

1 <DivID= "News">2         <imgsrc=".. /img/andy.jpg " />3         <P>Westlife's story starts in the small town of Sligo, in northwestern Ireland, because it is home to Shane, Mark and Kian, the protagonist of the story. 4 Their first performance was done at the age of 12 at the Hawkswell Theatre in Sligo, where Shane played Danny,kian as Kenickie, and Mark played Vince, so three lads met, It is God who is destined to create something remarkable together. 5 When Shane, Kian and Mark attended Summerhill College, Ireland's best pop bands were Boyzone, a combination of thousands of teenage boys and girls who had been fascinated by the melancholy of the song, and the source of the star dream in Shane's heart. He had wanted to form a four-person band called SC4 after graduating from college with his classmate Mark, Micheal Garret, and he had found Kian, and the cute blond boy was playing heavy metal, but they came together for the sake of common ideals. 6 soon, Derek Larey and Graham Keighron, from the same school, joined the band, with six of them changing their names to I.o.u, and soon launched the first single, written by Shane and Mark, named "Together Girl Forever ", although unfortunately, this is I.o.u's last single, but the boy's ideals in their efforts to write the more brilliant. 7 Shane Filan Album8 Shane Filan Album (3 photos)9Shane's mother Mae Filan has been in contact with Boyzone's manager, Louise Walsh, but he was busy with Boyzone's complicated business and did not sign the i.o.u, but their excellent performance made the experienced Louise very difficult to shed. After repeated consideration, the shrewd Louise introduced i.o.u to Boyzone's tonic Ronan Keating, and hope that the million-eye music Angel to the i.o.u of the boys to lead the road to success. After listening to the Shane they sang a few BSB songs, Ronan's intuition told him that they would be the stars of the future. So he and Louise became I.o.u's co-brokers. Perhaps Shane, Mark and Kian were too prominent to cover up the other three members of the light, Louise told Shane, he only wanted to sign three of their people. The choice of feelings and fate is always difficult, facing the possible loss of friendship, hesitation and pain is inevitable, but, listening to the call of the future, people have to learn to give up something, even for a more beautiful legendary story it.</P>Ten </Div>

PS: Don't pay too much attention to the text content, is my favorite Westlife in the Shane

Its style:

1 #news img{2 Max-width:200px;3 width:25%;4 float: Left;5 Display:inline;6 padding:2%;7}8 9 #news P{Ten width:68%; One float: Right; A Display:inline; - padding:2% 2% 2% 0; -}

Note: Why do you want to set max-width here?

Analysis: Use a streaming layout to set the width of the picture to a percentage instead of a fixed width. The reason for setting max-width is to avoid pixel distortion. The effect is that the image and text expand and contract as the page element div expands and shrinks, maintaining a visual balance.

This article is based on the book of the Great God of Andy, and currently only encountered these three different methods of processing images!

About image processing (drawing on CSS Mastery)