Home >Web Front-end >HTML Tutorial >The img in the div is displayed in the center according to different resolutions, and the excess part is hidden_html/css_WEB-ITnose
The img in the div is displayed in the center according to different resolutions, and the excess part is hidden_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:541591browse
Use div to control the center display of the img image in the div. As shown below, the yellow area is a 1920*300 image. If the resolution exceeds 1920, it will be fully displayed in the center. If the resolution is 1440, it will display the green color in the yellow image. The area size is displayed in the center. If the resolution is 1024, the yellow image will be displayed as large as the pink area in the center.
The code format should be dc6dce4a544fdca2df29d5ac0ea9906ba1f02c36ba31691bcfe87b2722de723b16b28748ea4df4d9c2150843fecfba68. Do not set a background image for the div. It is compatible with IE Google Chrome
Reply to the discussion (solution)
<div><img src="http://avatar.csdn.net/B/5/B/1_z549903832.jpg"/></div><style> div{width:50px;height:200px;background:red;position:relative;overflow:hidden;} img{margin:-50px 0px 0px -50px/*img宽度高度的一半*/;top:50%;left:50%;position:absolute;}</style>
The code format should be dc6dce4a544fdca2df29d5ac0ea9906ba1f02c36ba31691bcfe87b2722de723b16b28748ea4df4d9c2150843fecfba68, do not set a background image for the div Yes, compatible with IE Google Chrome
Background centered Is there any incompatible browser?