Personal Essays
The code implements the following functions:
1, loading the network unknown size of the picture, the user can freely enter the size of the display area, the picture will automatically adapt to the wide height.
2, horizontal, vertical center image of unknown size
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Horizontally and vertically centers an unknown size picture</title>6 <style>7 #imageBox{8 width:250px;9 Height:250px;Ten margin:30px Auto; One Border:1px solid Green; A Display:Table; /**key point**/ - text-align:Center; - } the - . Spacespan{ - Height:100%; - Display:Table-cell; /**key point**/ + vertical-align:Middle; /**key point**/ - } + A #testImage{ at vertical-align:Middle; - } - - </style> - <Script> - functionzoomimage (ImageId, Imageboxwidth, imageboxheight) { in varImage=document.getElementById (imageId); - //calculates the aspect ratio of the picture container to varImageboxwidthheightscale=Imageboxwidth/Imageboxheight; + //calculate the aspect ratio of the actual picture - varImagewidthheightscale=Image.width/Image.height; the varWidthscale=Image.width/Imageboxwidth; * varHeightscale=Image.height/Imageboxheight; $ varMaxscale=Math.max (Widthscale, heightscale);Panax Notoginseng if(Maxscale< 1) { //picture width is higher than box hour not picture operation - return NULL; the } Else { //the width of the picture or the height of the box large hours + if(Imageboxwidthheightscale>Imagewidthheightscale) { //The box is more "flat" relative to the picture, at which point the height of the picture is controlled A Image.height*=Heightscale> 1 ? 1 /Heightscale:heightscale; the } Else { //The picture is more "flat" relative to the box, which controls the width of the picture. + Image.width*=Widthscale> 1 ? 1 /Widthscale:widthscale; - } $ } $ } - </Script> - </Head> the <Body> - <DivID= "Imagebox">Wuyi <spanclass= "Spacespan"> the <ImageID= "Testimage" - src= "Http://daily.clzg.cn/res/1/20160311/75231457630062963.jpg" Wu onload= "Zoomimage (' Testimage ', 200,200)"/> - </span> About </Div> $ </Body> - </HTML>
Actual results such as:
Load network unknown size picture, auto-zoom and horizontal, vertical center 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
