• 前端页面图片大小自动适应


    由于服务器的图片大小参差不齐,想要最符合的尺寸很难做到。

    如何让图片大小自动适应:

    a场景:     div 包着  img

    img {
    auto;
    height: auto;
    max- 100%;
    max-height: 100%;
    }

    b场景:   背景图片 

    style="background-image: url(${user.headimgurl});background-size: cover; "

    如果你用了背景图片的方式:下面是background-size 的各个属性

     

     length

    设置背景图像的高度和宽度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage

    以父元素的百分比来设置背景图像的宽度和高度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    cover

    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。

    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
  • 相关阅读:
    Oracle数据库基础
    2016-08-08二期模拟考试
    易买网-登入
    常量接口模式
    反射
    Hhibernate延迟加载
    URL和URI的区别和联系
    Socket编程
    ArrayList如何实现线程安全
    移位运算符
  • 原文地址:https://www.cnblogs.com/j2ee-web-01/p/6739365.html
Copyright © 2020-2023  润新知