在响应式网站中产品、新闻、案例列表页中多半是图文结合的列表显示,有时候我们后台上传图片的尺寸不一样,在网页中会出现高低不平,排版错乱的问题,而要在网页上显示的整齐排版有序,这里我用到css定位来实现我们想要的效果。

首先,我们创建一个包裹图片的容器来放我们的图片,再从设计图纸列表页中截取一张列表图片放入,设置宽度、间距,因为是响应式所以高度不用设置,让图片自适应;效果如下图:

效果

河南网站建设选择亿宏世纪.5年来持续为众多企业提供河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销.

河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销

Html代码如下:

HTML代码

上图中让包裹图片的li相对定位(position:relative;),上图中放入的图片不是我们要在网页中显示的图片,我所以要经过进一步处理,如下图:

河南网站建设选择亿宏世纪.5年来持续为众多企业提供河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销.

河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销

html代码2

我们真正要显示的图片用一个div包裹(类名img),设置绝对定位(position:absolute;),放在li标签里,div(img)标签写入要真正显示的背景图片路径。

css如图:

河南网站建设选择亿宏世纪.5年来持续为众多企业提供河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销.

河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销

CSS代码

div(img)标签设置css属性(background-size:  cover !important;),让背景图片占满整个div(img)标签。

最终效果如图片:

河南网站建设选择亿宏世纪.5年来持续为众多企业提供河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销.

河南网络推广,河南网络营销,seo公司,河南百度优化,河南网站优化,河南全网营销

效果

这两张我们要显示的图片原始尺寸是不一样的,经过我的处理,他们再网页中显示的整齐有序。

河南亿宏世纪网络科技有限公司,专注于互联网+品牌整合营销,公司拥有专业的互联网管理、运营策划、UI设计、技术开发等团队,专业从事于工业互联网的开发建设。我司拥有成熟的网络技术开发团队,针对网站开发、技术服务、网站风格定位、网站功能优化、网站推广维护等都具备很强的专业技术水平,旨在为客户提供专业的互联网应用解决方案。公司始终秉持着诚信经营、质量为先的经营理念,我们不仅提供优质的网络技术和云端供应链服务,而且还在产品的选择、应用等方面提供专业的咨询与售后服务。

微信服务号

微信服务号

服务热线

15617359779

15617359779