精华内容
下载资源
问答
  • css img布局

    千次阅读 2018-12-04 16:46:10
    img标签之间的间距问题原理 img标签之间的间距问题原理 图片占位 <img src="http://placehold.it/600x300/0f0/ccc.png" alt="&...

    图片占位

    <img src="http://placehold.it/600x300/0f0/ccc.png" alt="">
    <img src="http://temp.im/450x300/0ff/d00" alt="">

    • 说明:

    450x300 : 宽度和高度
    0f0: 位置代表背景颜色
    ccc: 位置代表字体颜色

    img底部留白

    解决方法

    1、设置div{ font-size: 0}
    2、设置img{ display: block}
    3、设置img{ vertical-align:top;}
    4、设置img{float}

    当然推荐第二种方法,让img对象成为块级元素。

    img标签之间的间距问题原理

    img标签之间的间距问题原理

    <div style="width:130px;">
      <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
         <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
         <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
         <img src="http://placehold.it/60x30/0f0/ccc.png" alt="">
     </div>
     
     <div style="width:130px;">
         <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
         <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
         <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
         <div style="display:inline-block;width:60px;height:30px;background-color: red;"></div>
     </div>
    

    在这里插入图片描述

    实际上,所有display属性为inline , inline-block 的盒模型都会有文字特性,间距就是由于两个标签之间的空白引起的。

    解决方法

    1.删除标签之间的空格
    2.将父级设置为font-size: 0;
    3.将父级设置为使用负margin去除边距
    4.设置浮动

    img属于行内替换元素。height/width/padding/margin均可用。效果等于inline-block元素。
    行内非替换元素,例如, height/width/padding top、bottom/margin top、bottom均无效果。只能用padding left、right和padding left、right改变宽度。

    布局

    上下

    这里用到了figure
    在这里插入图片描述

    <figure style="width:100px;">
        <img  src="http://placehold.it/100x50/0f0/ccc.png" >
        <figcaption style="text-align:center;">logo</figcaption>
    </figure>
    <p>----------------------------------------------------------</p>
    <figure style="width:100px;">
        <figcaption style="text-align:center;">logo</figcaption>
        <img  src="http://placehold.it/100x50/0f0/ccc.png" >
    </figure>
    

    左右对齐

    在这里插入图片描述
    方法一:
    img标签vertical-align:middle

    <div>
    	<img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle">标题1111
    </div>
    <div>
       <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo" style="vertical-align:middle"><span>标题1111</span>
    </div>
    

    方法二:

    <style>
    .img{
        display: inline-block;
        vertical-align: middle;
    }
    .text{
        display: inline-block;
    }
    </style>
    <div>
        <div class="img">
            <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
        </div>
        <div class="text">
            标题1111
        </div>
    </div>
    

    方法三:
    背景图片形式,设置margin-left留出图片位置.

    两行等高

    在这里插入图片描述

    <style>
    .img{
       display: inline-block;
       vertical-align: top;
    }
    .text{
        display: inline-block;
    }
    p{
        margin: 0;
        padding: 0;/*清除默认样式*/
        height: 25px; /*等于图片的高度的一半*/
        line-height: 25px;
    }
    </style>
    <div>
        <div class="img">
            <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
        </div>
        <div class="text">
            <p>标题</p>
            <p>内容</p>
        </div>
    </div>
    

    多行左右布局

    在这里插入图片描述
    下面得都是这个样式

    1. 前者浮动,后者为display:inline-block;(父元素定宽时,后者长度溢出时,会换行;此时后者需计算并设置宽度)
    <style>
            .box {
                width: 300px;
            }
            
            .img {
                float: left;
            }
            
            .text {
                display: inline-block;
                width: 200px;
            }
            
            p {
                margin: 0;
                padding: 0;
                /*清除默认样式*/
            }
        </style>
    <div class="box">
            <div class="img">
                <img src="http://placehold.it/100x50/0f0/ccc.png" alt="logo">
            </div>
            <div class="text">
                <p>标题</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </div>
    
    1. 前者浮动,后者为margin-left:前者宽度;
    .box {
        width: 300px;
    }
    
    .img {
        float: left;
    }
    
    .text {
        margin-left: 100px;
    }
    
    p {
        margin: 0;
        padding: 0;
        /*清除默认样式*/
    }
    
    1. 两者都设置display:inline-block;(中间有空隙,父元素定宽时,后者长度溢出时,会换行;此时后者需计算并设置宽度)
    .box {
        width: 300px;
    }
    
    .img {
        display: inline-block;
        vertical-align: top;
    }
    
    .text {
        display: inline-block;
        width: 195px;
        /*中间有空隙  不能设置成200*/
    }
    
    p {
        margin: 0;
        padding: 0;
        /*清除默认样式*/
    }
    

    在这里插入图片描述

    .img,.text{
     vertical-align: middle;
    }
    
    1. flex布局
    .box {
        width: 300px;
        display: flex;
    }
    .text {
        flex: 1;
    }
    
    p {
        margin: 0;
        padding: 0;
        /*清除默认样式*/
    }
    
    1. table
    .box {
        width: 300px;
        display: table;
    }
    
    .img {
        display: table-cell;
        vertical-align: top;
    }
    
    .text {
        display: table-cell;
        vertical-align: top;
    }
    
    p {
        margin: 0;
        padding: 0;
        /*清除默认样式*/
    }
    

    图片可居中 设置

    .img{
     vertical-align: middle;
    }
    

    可看我的另一篇文章一行内的多行文本(input右侧的一行或多行文本) ,和这个效果类似

    欢迎提供其他方法?????????

    展开全文
  • css img等比例缩放并且图片水平垂直居中展示 父元素 div{ width: 400px; height: 400px; position: relative;/* 使用定位实现水平垂直居中 */ } 按父容器宽度自动缩放,并且保持图片原本的长宽比 img{ ...

    css img等比例缩放并且图片水平垂直居中展示

    父元素

    	div{
    		width: 400px;
    		height: 400px;
    		position: relative;/* 使用定位实现水平垂直居中 */
    	}
    

    按父容器宽度自动缩放,并且保持图片原本的长宽比

    	img{
    		width: auto;
    	    height: auto;
    	    max-width: 100%;
    	    max-height: 100%;
    	    /* 向父元素定位 */
    	    position: absolute;
    		top:50%;
    		left:50%;
    		transform: translate(-50%,-50%);
    	}
    

    没加定位效果图
    在这里插入图片描述
    加了定位效果图
    在这里插入图片描述

    展开全文
  • Apache反向代理无法加载js css img 反向代理配置 ``` ProxyRequests Off <Proxy http://proxy.mcmxzl.com> Options MultiViews AllowOverride None Order allow,deny Allow from all </Proxy>...
  • css img自适应盒子尺寸

    千次阅读 2019-04-24 11:42:59
    .img-cantainer { position: relative; width: 260px; height: 150px; overflow: hidden; img { position: absolute; top: 50%; min-...

    首先保证图片可以填满 然后纵向居中

    .img-cantainer {
            position: relative;
            width: 260px;
            height: 150px;
            overflow: hidden;
            img {
                position: absolute;
                top: 50%;
                min-height: 100%;
                min-width: 100%;
                transition: all .3s;
                transform: translateY(-50%);
                z-index: -1;
            }
        }
    

    或者
    不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。

    img{
    		width: 100%;
            height: 100%;
            }
    

    那是不是就这这么简单完事儿了呢?如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。
    假如你介意 图片放大后会失真,我们可以改进上面的代码,只需要将img的样式简单修改

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

    max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽,在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的,所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小,更通俗的讲就是只允许缩小不允许放大img。

    具体情况中是选择width:100%还是max-width:100%还是依据个人的需求而定,另外在响应式设计中这个问题稍微会复杂一点

    响应式

    响应式设计中:如果是img标签引入的图片,可以使用延迟加载的方式来加载,在实际加载图片之前先用js检查窗口宽度,然后加载不同分辨率的图片,比如宽度<=480,就加载80px宽度的图片,480 < 宽度 <= 768,加载120px的图片, 宽度> 768则加载160px的图片,如果宽度是600px怎么办呢,通过百分比来缩放120px的图片达到合适的结果。

    这样做的好处是对于移动设备来说,下载的图片会小一些,减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。

    我觉得响应式设计中对于图片的考虑应该从布局设计就开始,尽量使图片在各个窗口宽度下的尺寸不要相差过大,通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。

    最后,假如你的img是作为background使用的就需要通过background-size: cover/contain又或者是具体的百分比去设置图片在容器中所占比例的大小

    展开全文
  • CSS img正方形图片

    千次阅读 2018-04-18 17:41:00
    需求:后端返回了一组图片,图片的宽度固定,高度不固定。前端要求图片展示为正方形,图片不能变形且自适应,如果图片高了则裁剪掉。 &lt;div&gt; &...// css .img-wrap { position:

    需求:后端返回了一组图片,图片的宽度固定,高度不固定。前端要求图片展示为正方形,图片不能变形且自适应,如果图片高了则裁剪掉。

    <div>
      <div class="img-wrap">
      <img src="a.jpg">
    </div>
    </div>
    
    // css
    .img-wrap {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            overflow: hidden;
    
    }
    
    .img-wrap img  {
            position: absolute;
            width: 100%;
           }

    原理解析:img-wrap继承父元素的宽度,为了保证img-wrap容器的高度等于宽度,通过padding-bottom撑开高度,接下来图片只设置宽度让它等于父元素的宽度,图片的高度会自适应。父元素设置overflow:hidden,这样设置以后图片即使过高也能保证不变形,只是看起来像裁剪成了正方形。

    展开全文
  • PGIS 天地图主题修改 天地图颜色修改 天地图背景 ...HTML CSS IMG filter 修改图片背景颜色 HTML CSS IMG filter 修改背景色 颜色矩阵计算 RGB转换颜色矩阵 RGBA转换颜色矩阵 SVGfeColorMatrix...
  • css img图片拉伸问题处理

    千次阅读 2020-12-24 17:47:17
    // An highlighted block img { display: block; width: 100%; //设置宽度,让height auto height: auto; margin-top: 2rem; }
  • css加上属性: object-fit: fill; object-fit: contain; object-fit: scale-down; 这样就可以了
  • css img 等比例自动缩放

    万次阅读 2018-04-26 09:34:01
    img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } ----------------------------------------------------------------------------------------------------------...
  • css img 居中/水平居中/垂直居中

    千次阅读 2016-12-26 19:45:07
    这是一个很简单的问题 , 也是一个很蛋疼的问题:以下是html代码<a class="img_center" herf="#"> <img alt="这是图片文字...以下是css代码:.img_center{ display:flex; justify-content:center; align-items:center;
  • <div> <img /> </div> 父级容器css width: 100%;height: 0;padding-bottom: 100%;position: relative; 子容器css width: 100%;height: 100%;position: absolute;
  • css img标签高度等于宽度.

    千次阅读 2016-04-29 12:24:32
    以下只是个人笔记,遇到的坑. ...所以只能用CSS解决, 具体代码如下; {CSDN:CODE: } 父级容器css width: 60%;height: 0;padding-bottom: 60%;position: relative; 子容器css width: 100%;height: 10
  •  img 标签设置 width: 100%;但是会有一个问题,高度大于父div时,会有部分被隐藏。第二种 解决办法出自 深圳前端交流群 (群号:247687975)深圳-旧城以西 。使用背景图片的方式,设置css3 background-size: cover...
  • 转载:... vue+webpack解决css引用图片打包后找不到资源文件的问题 使用vue打包,通过css引用图片资源。 [css]view plaincopy .img{ height:500px; width:100%; backgro...
  • css img 等比例平铺怎么个屏幕

    千次阅读 2015-03-25 20:08:00
    有时候 <img> 显示图片的时候,由于不同屏幕的尺寸不一。 所以 这时候 图片就应该等比平铺满整个屏幕。 设置图片样式 : .img{ position:absolute;/*不设置没有效果*/ width:100%; height:100%; ...
  • 需要在引入的img样式上写入: object-fit: cover; object-position: top;//可能有时候图片不是从头部开始截图的 所以需要定位一下 两行代码 就可以了 第二种的方法就是引入背景图 样式中写入 width: ...
  • 今天在springboot上面集成了thymeleaf模板引擎,再引入css,js和图片的时候出现了好多问题, 下面就让你们看下有效的解决方式吧 1:首先展示项目结构: 2:其次是引入的格式 <!DOCTYPE html> <...
  • css 控制img大小

    万次阅读 2016-10-22 14:49:05
    第一个比较简单,就是把img的尺寸都设为100%,例如这样不管图片原始尺寸是多少,都会被限制在这个范围之内,不过这个方法有很大的局限性,必须要求图片的高宽比例与div的高宽比例一样,这样图片才不会变形 ...
  • css设置img成圆形

    2019-10-03 12:54:23
    效果图: <img src="test.jpg" /> css代码:img{ width:30px; height:30px; border-radius:50px; } 转载于:https://www.cnblogs.com/cnsevennight/p/3924386.html
  • 方法一:给父级元素样式设置font-size:0; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...style type="text/css"> .imgs { font-size: ...
  • css来控制img正方形自适应

    万次阅读 2016-10-11 08:23:54
    css来控制div正方形自适应 <img src=""> </div>.div{ width:100%; height:0px; padding-bottom:100%; position:relative; } .div img{ w
  • cssimg布满全屏

    千次阅读 2018-03-15 16:25:25
    1. background-image的布满全屏 'background-image': 'url', 'width':'100%', 'max-width':'100%', 'max-height':'500px', ...'height': '330px', ...'background-size':'100% 100%', ...'-moz-background-size':'100% ...
  • CSS - img自适应宽高

    千次阅读 2019-02-26 16:30:38
    使用CSS3属性object-fit,参考博客CSS3object-fit属性 假设一个img为宽200px,高150px,不对img属性做任何处理,图片会被拉伸,如下图所示 为了不让图片被拉伸,可以居中显示在固定的宽高内(200px 150px),...
  • .tree-toggle-off { content:url(../image/toggle-off.png); } .tree-toggle-on { content:url(../image/toggle-on.png); }
  • cssimg图片vertical-align属性

    千次阅读 2017-12-29 14:16:21
    img图片属性 vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高  值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit  初始值: baseline  应用...
  • img css3属性

    千次阅读 2018-12-19 19:47:48
    img srcset 属性 img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如: &lt;img src="small....
  • CSS——img自适应div大小

    千次阅读 2019-10-01 15:33:33
    ="img/qt_img/SA_4.png" /> div > < div class ="div2" > < img class ="bg2" src ="img/qt_img/SA_4.png" /> div > < div class ="div3" > < img class ="bg3" src ="img/qt_img/SA_4....
  • CSS 修改Img标签中的图片(src)

    千次阅读 2020-12-31 11:23:26
    在开发的过程中遇到了一个比较特别的问题,需要使用 CSS修改Img中的图片。 content 那最先通过搜索找到的解决方案是使用 Content 样式 /*图片替换*/ img { content: url(../Img/Logo.png); } 这个方案在Chrome...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 366,908
精华内容 146,763
关键字:

cssimg