响应式网站前端制作之css定位实现图片尺寸不一等比例显示(前端响应式布局)

时间: 2022-08-02 08:19:14 浏览次数:195
在响应式网站中产品、新闻、案例列表页中多半是图文结合的列表显示,有时候我们后台上传图片的尺寸不一样,在网页中会出现高低不平,排版错乱的问题,而要在网页上显示的整齐排版有序,这里我用到css定位来实现我们想要的效果。
首先,我们创建一个包裹图片的容器来放我们的图片,再从设计图纸列表页中截取一张列表图片放入,设置宽度、间距,因为是响应式所以高度不用设置,让图片自适应;效果如下图:

效果图1

Html代码如下:

HTML代码

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

html代码2

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

CSS代码

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

效果图2

这两张我们要显示的图片原始尺寸是不一样的,经过我的处理,他们再网页中显示的整齐有序。
以上就是关于响应式网站前端制作之css定位实现图片尺寸不一等比例显示(前端响应式布局),希望对你有帮助,更多内容关注蓝港网络

  非常感谢您读完蓝港网络的这篇文章:"响应式网站前端制作之css定位实现图片尺寸不一等比例显示(前端响应式布局)",仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供:网站建设、网站制作、官网建设、SEO优化、小程序制作等服务,欢迎联系我们提供您的需求。

标签:

Copyright © 常州蓝港网络科技有限公司 苏ICP备2022017479号-1