使用CSS实现简单的图片自适应UI模板代码

这篇具有很好参考价值的文章主要介绍了使用CSS实现简单的图片自适应UI模板代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css实现图片排版效果</title>
    <link rel="stylesheet" href="./ceshi.css">
</head>
<body>
<!--
css图片自适应模板
-->
<div class="centent">
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
    <div class="main">
        <div class="img">
            <img src="https://lib.microa.cn/static/images/shuffling.jpg" >
        </div>
    </div>
</div>
</body>
</html>

CSS代码:

body {
    padding: 15px;
    min-width: 320px;
}

.img>img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.img {
    display: flex;
    width: 90%;
    height: 90%;
    align-items: center;
    border-radius: 5px;
}

.main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 250px;
    max-width: 25%;
}

.centent {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    min-height: 320px;
}

@media screen and (max-width: 1000px) {
    .main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.3%;
        height: 250px;
        max-width: 33.3%;
    }

    body {
        padding: 5px;
    }
}

@media screen and (max-width: 756px) {
    .main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 250px;
        max-width: 50%;
    }

    body {
        padding: 8px;
    }
}

@media screen and (max-width: 500px) {
    body {
        padding: 3px;
    }
}

@media screen and (max-width: 350px) {
    body {
        padding: 0px;
    }
}

文章来源地址https://www.toymoban.com/news/detail-511281.html

到了这里,关于使用CSS实现简单的图片自适应UI模板代码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css图片适应盒子大小

    案例:轮播图内图片适应父级盒子大小 (1)以长边为标准,短边自适应: (2)以短边为标准,长边中间截断: 在图片的样式中添加: 该属性会对图片保留原始比列,多余的会被裁剪。添加该属性后,图片会适应指定容器的高度与宽度。一般用于 img 和 video 标签,可以在剪

    2024年02月04日
    浏览(40)
  • 如何使用CSS实现一个自适应等高布局?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(47)
  • CSS样式背景图片的自适应

    今天在写一个页面的时候,需要用到一个背景图片。 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调。但是由于太久没有用到这个属性了,无可奈何又去找了一番度娘 废话不多说,上代码 1.css图片自适

    2024年02月11日
    浏览(45)
  • 如何使用界面控件DevExpress WinForms自带的UI模板?其实很简单

    DevExpress WinForm拥有180+组件和UI库,能为 Windows Forms 平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任! DevExpress WinForm v22.1.5版本中发布了新的UI模板(

    2024年02月05日
    浏览(64)
  • 如何使用CSS实现一个自适应两栏布局,其中一栏固定宽度,另一栏自适应宽度?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月11日
    浏览(40)
  • Unity 动态更换Image图片 && UI自适应

    前提:Image源文件必须存放在自行创建的文件夹[Resources]中 方式一:typeof 类型 Resources.Load()动态更换Image 方式二:泛型 这里的icon_{数值:00}实际上是图片的名称,只不过用的是正则的方式替换了

    2024年02月11日
    浏览(50)
  • CSS3 object-fit视频和图片比例自适应

    CSS object-fit 属性 工作中制作一个首页,背景是一个视频文件,由于视频本身的高宽比与显示器的高宽比不匹配,导致首页出现了滚动条。 问题:现在PM 要求首页不能出现滚动条 个人理解:视频的高宽比固定了,不可能改变视频本身的高宽比例,因此是做不到了 同事介绍了

    2023年04月17日
    浏览(35)
  • element UI中设置图片的高度并支持PC和手机自适应

    一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination(分页)组件 在使用Element UI时,可以通过样式覆盖来实现图片的高度在PC和移动端的自适应

    2024年04月13日
    浏览(44)
  • 最简单的使用css修改element-ui的el-select的高度

    个人博客同步csdn 首先给el-select的容器上面自定义一个类名,避免污染别的el-select 写css,注意这里用了less 效果图(前) 效果图(后)

    2024年02月12日
    浏览(41)
  • css实现文字大小自适应

    在页面编写中经常会碰到页面自适应的问题,也就是页面内部的元素会随着窗口的放大缩小而放大缩小,box可以通过calc + 百分比的形式做到页面自适应,但是 box 内的字体却无法做到这点,往往 box 自适应大小了,内部的字体还是原来的大小,看起来会非常别扭,下面就来

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包