精华内容
下载资源
问答
  • img src="图片地址" alt=""> </div> /* img 外侧盒子 */ .guild_img_box{ position: relative; width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; display: block; ...
        <div class="guild_img_box">
            <img src="图片地址" alt="">
        </div>
    
    /* 
        img 外侧盒子
    */
    .guild_img_box{
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto;
        display: block;
        margin-bottom: 16px;
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%) !important;
        border: 1px solid #e9e9e9;
        overflow: hidden;
    }
     .guild_img_box>img{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        max-width: 100%;
        max-height: 100%;
        width:auto;
        height:auto;
    }
    
    展开全文
  • 效果方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示,兼容性最好HTML代码 复制代码CSS代码.img-box{/*限定图片盒子宽高*/width:500px;height:500px;}img{width:auto;height:auto;max-...

    效果

    dbbe02100b14d2a84f6cf7cccaca53fe.png

    ab5da6383ee3f50d19539c809957959a.png

    方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示,兼容性最好

    HTML代码

    ...

    复制代码

    CSS代码

    .img-box{

    /*限定图片盒子宽高*/

    width:500px;

    height:500px;

    }

    img{

    width:auto;

    height:auto;

    max-width:100%;

    max-height:100%;

    /*不定宽高的图片居中显示*/

    position: relative;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%)

    }复制代码

    方法二动态设置图片展示区域的背景图background-image来达到不同比例图片时始终等比例缩放显示

    HTML代码

    CSS代码

    .img-box{

    /*限定宽高*/

    width: 500px;

    height: 500px;

    background-image: url('...');

    /*水平垂直居中*/

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;}复制代码

    方法三直接赋值img标签的src属性即可,最简单但低版本兼容性差

    HTML代码

    ...复制代码

    CSS代码

    img{

    /*限定宽高*/

    width:500px

    height:500px;

    object-fit:contain

    }复制代码

    object-fit这个属性决定了像img、video等替换元素的内容应该如何使用他的宽度和高度来填充其容器。

    展开全文
  • 外层div,内层img,如何让img在div内水平垂直居中展示呢? 上面已经实现了图片在div水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:

    外层div,内层img,如何让img在div内水平垂直居中展示呢?

     

     

     

     

    上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:

     

     

    展开全文
  • CSS等比例缩放的盒子

    2020-12-23 17:37:02
    你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变。如下图所示,最上面是原始大小的图片,下面两张则分别是设置了 width: 50% 和...

    你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变。

    如下图所示,最上面是原始大小的图片,下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。

    可以看到把宽度设置为了原来的一半的同时,图片的高度并不是保持原来的大小,而是相应的也变成了原来的一半,使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。

    作为对照,我们看看单独修改其他元素的宽和高会产生什么样的效果:

    上图最左边的蓝色矩形是原始的 div 元素,之后两个分别是对其设置了 width: 50% 和 height: 50% 属性后的样子。可见与 img 元素不同,单独设置 div 元素的宽度(高度)时,对应的高度(宽度)并不会改变,从而导致元素的比例发生变化。这一结果相信每个稍微对前端有些了解的同学都能猜到。但是究竟是什么导致了同样的属性用于 img 和 div 后会产生不同的结果呢?

    img 在元素分类中属于 replaced (被替换的)元素。replaced 元素表示这个元素内容的显示不是由 CSS 控制的。换句话说,对于 img 元素而言,图片的内容并不是由 CSS 定义的,而是通过其 src 属性指向的资源决定的。很多 replaced 元素来都会有自己的固有尺寸(Intrinsic dimension),img 也不例外1。当 img 的高度改变后,浏览器会计算出其缩放比例,而当元素的宽度是 auto(即默认值)时,浏览器则以原始宽度 * 缩放比例来作为元素的新宽度。从而使得 img 元素的比例始终保持一致。

    然而这都并不是这篇文章讨论的重点。(那位同学请不要说脏话,不文明

    重点是什么?重点就是题目:实现等比例缩放的盒子。

    在响应式设计逐渐成为主流的今天,流式布局这个词即使放在一两年前也绝算不得是个新鲜词汇。下面是一个布局实例:

    上图中每个蓝色的矩形分别对应一个 div 元素,每个元素的宽度占窗口宽度的四分之一(图示中为了演示方便给每个元素加了边距效果)。如果不做额外处理,当窗口宽度变小时上图的页面会变为如下所示:

    可见每个元素的宽度进行了缩放,但高度并没有变化,看起来并不是很协调。所以有些场景下我们需要实现当窗口宽度缩放时,使得元素宽度自适应的同时,保证每个元素的宽高比例不变。

    很多同学在我话还没讲完时,就已经纷纷掏出 JavaScript 大锤着手实现了起来。然而这个系列文章的标题是《你不知道的 CSS》,自然不会介绍 CSS 实现不了这种打自己脸的需求,而且就此例而言,使用 JavaScript 实现效果并不好,绑定 onresize 事件后在拖拽时某些星座的朋友会察觉出来些许卡顿(你试试便知),而且在 JavaScript 加载完成前是看不出效果的。

    其实用 CSS 可以很容易地实现这样的效果,用的属性也是我们每个工作日和周末(如果加班的话)都会用到的:padding-bottom。padding-bottom 有一个让人很容易忽略的特性是当它的值是百分比形式时,百分比的基数是其所在元素的父元素的宽度而不是高度(同 padding-left 和 padding-right 一样)。这样解决方案也就非常明显了:将元素的 height 设成 0,使得元素的高度等于 padding-bottom;

    合理设置 padding-bottom 的值。比如每个元素的 width 是 25%,现在想让元素的高度始终保持为其宽度的两倍,则 padding-bottom 的值应该设置为 50%。

    结果如下图所示:

    然而至此,这篇文章还没完。肯定会有很多同学疑惑既然 height 被设成了 0,那么如果元素的 overflow 为 hidden,里面的文字会不会因为超出了元素高度而被隐藏呢?

    答案是不会。根据 CSS 2.1 规范2,overflow 只会对处于 padding edge 外面的内容生效,即只有超出了 padding 区域的内容才会被 overflow 属性隐藏掉。

    展开全文
  • 很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤。这用css竟然也是可以...
  • flex布局提供一种对容器条目更方便地进行布局,控件分配,和对齐的方式。flex布局的容器能够根据窗口大小变化而改变条目的大小和位置,以呈现最佳的显示效果,它的优势在于开发者可只需要申明容器或其子条目的布局...
  • 一个网页往往会有很多图片,而网站的编辑上传图片时可能并不一定按照为父框设定的那个宽高来传,这样图片往往会父框撑开或者被父框截断。一种比较好的解决的办法是这样的: HTML代码结构: <div class...
  • 自适应布局——等比缩放式案例,页面大小和字体随着页面变大而变大
  • 1、Flex布局今天整理了一些关于Flex布局,...css任何一个容器均可以指定为Flex布局。html.box{display: flex;}行内元素也可使用Flex布局。web.box{display: inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀...
  • CSS初学习(3)

    2021-02-26 14:58:26
    网页的布局方式 网页的布局方式:浏览器是如何对网页的元素进行排版的 1.标准流排版方式(文档流/普通流) 标准流排版方式就是...浮动流没有居中对齐,也就是没有center取值 浮动流不可以使用margin:0 auto
  • 然后手动缩小为一半,那么在移动端显示的时候会放大为两倍,这次放大因为原图先缩小了两倍,那么在放大时即恢复原图大小,就不会变模糊 (3)背景二倍图 用background-size设置图片大小 特别注意精灵图的二倍图转换 ...
  • css+css3层叠样式表标签汇总(笔记)

    千次阅读 2021-01-30 08:56:02
    10.2.3 表格的细线边框 10.3 内边距(padding) 10.3.1 内盒尺寸计算(元素实际大小) 10.3.2 内边距产生的问题 10.4 外边距(margin) 10.4.1 块级盒子水平居中 10.4.2 文字居中盒子居中区别 10.4.3 插入图片和...
  • CSS知识点

    2021-10-19 10:19:41
    一、体验CSS 通过标签修改样式的缺点: 1、需要记忆哪些标签有哪些属性,如果该标签没有这个属性,那么设置了也没有效果 2、一旦需求发生变化,需要修改大量代码才能满足现有需求 3、HTML只有一个作用就是用来添加...
  • css基础(一)

    2021-04-11 16:43:49
    1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。 2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。 常用的浏览器 浏览器是网页显示、运行的平台
  • 1 flex布局的特点 总盒子的宽度大于子级盒子所有加起来和的宽度的话 会按照盒子所占比例进行等比缩放 总盒子的高度大于子级盒子所有加起来和的高度的话 会按照盒子所占比例进行等比缩放 2 flex子元素的属性 2.1 ...
  • 自己总结的html+css试题

    万次阅读 2017-10-23 15:36:23
    1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? (1)<!DOCTYPE> 声明位于文档的最前面,处于 <... 标签之前。...(3)在混杂模式,页面以宽松的向后兼容的方式显...
  • HTML+CSS

    2021-08-15 14:29:48
    按钮datalist标签表单标签-非input标签video标签audio标签详情和概要标签marquee标签被废弃的标签字符实体CSS固定格式文字相关属性文本属性颜色控制属性标签选择器id选择器类选择器子元素选择器交集选择器并集选择器...
  • CSS3之flex兼容写法

    2021-08-04 05:58:28
    今天还是变谈CSS3的flex怎么处理兼容的flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安...
  • 仿写京东过程经常碰到的CSS问题 CSS 常用属性 opacity: 1 !important; 加权重 透明度 transparent 排列(一行) align 背景颜色: background-color 宽度: width:100px; 高度: height:100px; 悬停 ...
  • HTML5+CSS3

    万次阅读 多人点赞 2020-02-09 18:20:26
    E[att *= “val”] 匹配具有att属性,含有val的E元素 E[att $= “val” i] 匹配元素不区分大小写,在结束方括号前加i个 注意: 类选择器名是可以重复的,ID选择器的名字不能重复 CSS 优先级与权重值,最高权重,在...
  • CSS3新增特性详解

    2021-01-26 09:17:40
    CSS3 CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。 CSS3 被划分为模块。其中最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 1. 背景透明rgba() ...
  • 记个笔记,怕忘记了,还可以翻一翻。。。 网页的组成:结构HTML 表现CSS 行为JS W3C万维联盟,创建1994年。 HTML 1993、2008、2014 HTML指的是超文本表及语言www万维网的描述语言
  • CSS3:

    2021-05-07 19:21:44
    CSS3: 属性选择器: 选择符 简介 E[att] 选择具有att属性的E元素 E[att=“val”] 选择具有att属性属性值等于val的E元素 E[att^=“val”] 匹配具有att属性、值以val开头的E元素 E[att$=“val”] ...
  • 0x02 CSS快速入门

    2021-12-16 16:15:20
    前言:CSS内容较杂,建议只看前五节,对CSS有一定的认识;后面需要用到对应的样式再去检索;另,本篇文章涉及的知识肯定不全,毕竟这块知识太杂了,后续应该会更新 文章目录一.CSS简介1.概述2.语法3.导入方式行内...
  • H5+CSS3

    2021-03-17 23:57:57
    HTML+CSS ...1.1文档类型声明 <!... <... //语言:可以是en代表英文,浏览器解析时会提示是否翻译成中文 ...mate chsrset="UTF-8">...网站有大量汉字对网页加载速度有要求使用gbk编码 <mate nam
  • CSS 面试总结

    2021-02-26 16:05:15
    css 面试总结 一、flex布局 传统布局:基于盒子模型,依赖于display 属性 + position属性 + float属性 缺点:对于特殊布局不方便(垂直居中) Flex 布局():可以简便、完整、响应式地实现各种页面布局; 1. flex ...
  • CSS布局 网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的,浏览器默认的排版方式就是标准流的排版方式 常见的布局方式有浮动布局、定位布局、伸缩盒布局。 1.浮动布局 通过float属性标准流布局...
  • HTML和CSS基础学习

    千次阅读 2020-02-04 19:13:35
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDOE0oD2-1580814757274)(C:\Users\小孟快跑\AppData\Roaming\Typora\typora-user-images\1566911777191.png)] 二、CSS 1、CSS选择器 ...
  • HTML+CSS篇笔记

    千次阅读 2020-10-07 23:09:41
    结构(HTML)、样式(CSS)、行为(js) HTML:超文本标记语言 ECMA:管JS W3C:管HTML,CSS xhtml:扩展超文本标记语言 HTML5:HTML的第五代 建立站点: 规划所有的资源和代码 整合资源 主要标签 <标签 属性=“值...
  • 渐进增强:搭建起基础结构,根据用户需求进行功能添加。 优雅降级:先把所有功能开发完成,根据用户需求进行功能删减 去除滚动条:::-webkit-scrollbar{ ...css(层叠样式表): 重要声明:!+important(最高优先

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 414
精华内容 165
关键字:

css中如何将盒子里的图片等比缩小且居中