CSS controls image zoom or partial display

Source: Internet
Author: User

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>css control Picture Zoom or partial display</title>6 </Head>7     8 <Body>9 <!--Image Auto-zoom display: By setting the width of the picture to achieve -Ten      One      A     <!--First: Set the width of the picture as a percentage of the screen width, enabling the image to follow the screen size auto-scaling - -     <P><imgsrc= "Images/1.jpg"style= "width:40%"/><P> -      the     <!--The second kind: setting Max-width, Max-height automatically adapts to the parent container, setting Max-height has one disadvantage is that when the picture width is larger than the capacity, it will exceed the parent container or the display is not complete (parent container overflow:hidden;) - -     <Divstyle= "width:200px; height:200px; border:1px dashed red;"> -         <imgsrc= "Images/1.jpg"style= "max-width:200px;"/> -     </Div> +     <Divstyle= "width:200px; height:200px; border:1px dashed red; overflow:hidden;"> -         <imgsrc= "Images/1.jpg"style= "max-height:200px;"/> +     </Div> A      at <!--three ways to display part of a picture -  -  -  -     <!--the first method: for the indefinite long background picture is more useful, displays the central part - -     <Divstyle= "width:200px; height:200px; border:1px dashed red; Background:url (images/3.jpg) no-repeat Center Center"></Div> -      in     <!--The second type: The parent container is set to Overflow:hidden, and the value of margin is set to negative to implement - -     <Divstyle= "width:300px; height:300px; border:1px solid red; overflow:hidden;"> to         <imgsrc= "Images/2.jpg"style= "margin-top:-25px; margin-left:-50px;"/> +     </Div> -      the     <!--Third: Set the parent Shangzi to the absolute location, and then by setting the top and left values to a negative value - *     <Divstyle= "width:300px; height:300px; border:1px solid red; position:absolute; overflow:hidden;"> $         <imgsrc= "Images/2.jpg"style= "position:absolute; top:-200px; left:-100px;"/>Panax Notoginseng     </Div> -  the </Body> + </HTML>

Purely personal some small summary, do not like to spray, thank you.

CSS controls image zoom or partial display

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.