div中img根据不同分辨率居中显示,超出部分隐藏_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:49:54
Original
1518 people have browsed it

用div控制div中 img 图片居中显示 如下图黄色区域是一张1920*300的图片如果分辨率超过1920,就完全显示出 居中显示, 如果分辨率是 1440的 就显示出  黄色图片中绿色区域大小,居中显示,如果分辨率是1024,就显示黄色图片粉色区域那么大居中显示。
代码格式要

div中img根据不同分辨率居中显示,超出部分隐藏_html/css_WEB-ITnose
的,不要给div设置背景图的,兼容ie 谷歌浏览器


回复讨论(解决方案)

<div><img  src="http://avatar.csdn.net/B/5/B/1_z549903832.jpg"/ alt="div中img根据不同分辨率居中显示,超出部分隐藏_html/css_WEB-ITnose" ></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>
Copy after login

代码格式要

div中img根据不同分辨率居中显示,超出部分隐藏_html/css_WEB-ITnose
的,不要给div设置背景图的,兼容ie 谷歌浏览器

背景居中  还有不兼容的浏览器?
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!