Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
