Div placement picture Summary

1. Center the image

 <  Html  >      <  Style  >  # Image  {  Width  :  500px  ;  Height :  500px  ;  Background  :  # Fff000  ;  Text-align  :  Center  ; Overflow  :  Hidden  ;      }  # Image img  {  Vertical-align  :  Middle  ;  }  # Block  {  Width  :  0px  ;  Height  :  100%  ;      }         </  Style  >      <  Body  >          <  Div  ID  = "Image"  >              <  IMG  SRC  = "Http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"  />               < IMG  SRC  = ""  ID  = "Block"  />          </  Div  >      </  Body  >  </  Html  > 

2. The original image is displayed. the excess part is hidden.

 <  Html >      <  Style  >  # Image  {  Width  :  500px  ;  Height  :  500px ;  Background  :  # Fff000  ;  Overflow  :  Hidden  ;      }      </  Style  >     <  Body  >          <  Div  ID  = "Image"  >              <  IMG  SRC  = "Http://cms.smu.sh.cn: 888/imagesstore/mmlib/superstar/2009/11/23/07 ba1b0c79b146aa9af32c10f2a5bcd2.jpg"  />          </  Div  >     </  Body  >  </  Html  > 

3. Fill in the DIV, stretch or scale the image.

 <  Html  >      <  Style  >  # Image  {  Width :  500px  ;  Height  :  500px  ;  Background  :  # Fff000  ;      } # Image img  {  Width  :  100%  ;  Height  :  100%  ;      }      </ Style  >      <  Body  >          <  Div  ID  = "Image"  >              <  IMG  SRC  = "Http://cms.smu.sh.cn: 888/imagesstore/mmlib/superstar/2009/11/23/07 ba1b0c79b146aa9af32c10f2a5bcd2.jpg"  />          </ Div  >      </  Body  >  </  Html  > 

4. The DIV size follows the image changes

 <  Html  >      <  Body  >          <  Div  >             <  IMG  SRC  = "Http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"  />          </  Div  >      </  Body  >  </  Html  >