精华内容
下载资源
问答
  • 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配...

    给图片css添加object-fit属性,可用参数:

    object-fit属性由下列的值中选择一个关键字来指定。

    fill

    被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。

    contain

    被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

    cover

    被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。

    none

    被替换的内容尺寸不会被改变。

    scale-down

    内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

    建议使用cover、none或contain。

    酷炫pc及百搭pc模板在home.css的.pk-home-slider-1 img内添加object-fit: none即可。

    陕西,西安

    展开全文
  • img标签在div中拉伸显示

    千次阅读 2019-10-09 21:04:59
    img标签在div中拉伸显示 父级: div { width: 100%; padding-bottom:60%; //如果要正方形: /* width: 100%; padding-bottom:100%; */ position:relative; } 子级: img { height: 100%; position: absol.....

    父级:

    div {
    	width: 100%;
        padding-bottom:60%;
        //如果要正方形:
        /*
        width: 100%;
        padding-bottom:100%;
        */
        position:relative;
    }
    

    子级:

    img {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    }
    
    展开全文
  • 记一次img标签图片不拉伸处理办法

    千次阅读 2020-10-13 17:07:07
    这个就简单了,微信小程序的 image 标签有一个 mode 属性,但是原生 html 的 img 标签没有啊 但是原生的 html 标签有 background-image 有 background-repeat 有 background-position 有 backgr

    当前需求是:

    UI 画的盒子,固定宽高 242 * 162,里边有一张图片,图片宽高不固定,但是图片不能拉伸,怎么展示没说

    1. 图片全部展示,不填充满,但是图片不能拉伸(最长边展示出来)
    2. 图片展示一部分,图片不能拉伸(最短边展示出来)
    3. 其他火星需求:宽高固定,动态图片宽高不固定,全部填充满,不裁剪,不拉伸,好无理的需求呐,不干,直接怼回去就行

    这个就简单了,微信小程序的 image 标签有一个 mode 属性,但是原生 html 的 img 标签没有啊

    但是原生的 html 标签有 background-image 有 background-repeat 有 background-position 有 background-size

    <!-- vue 项目 原生 html 一样,只是用 js 做一个动态的图片绑定就行了 -->
    <div class="goods-item-pic" :style="'background-image:url('+goods.pic+')'"></div>
    <style>
    .goods-item-pic{
      width:242px;
      height:162px;
      background-size:cover; /* 看情况,有 cover 和 contain 模拟小程序里边的 image 的 mode 属性 */
      background-repeat: no-repeat; /* 不让重复 */
      background-position: top center ; /* 固定展示的位置 */
    }
    </style>
    
    展开全文
  • 1.img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器我们需要显示一张图片2.img标签格式:img标签名称,src是属性其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉...

    本篇教程介绍了HTML+CSS入门 img标签学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

    <

    1.img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器我们需要显示一张图片

    2.img标签格式:  img是标签名称,src是属性

    其实img标签中的src是英文source的缩写,所以img标签中的src就是用来告诉img标签,需要显示的图片名称

    3.注意点:

    和H系列标签/p标签/还有hr标签不一样,img标签不会独占一行(可以用开发者工具中element来验证,选中img标签,看下是否占据一整行)

    如果我们手动指定了img标签显示的图片的宽度和高度,有可能会导致图片变形了,那么如果又想指定宽度和高度,又不想图片变形,我们可以只指定宽度和高度其中一个值即可,如果只指定了宽度,系统会自动计算高度,如果指定了高度,系统会自动计算宽度,并且都是等比例拉伸的,也就是说不会变形的。

    4.其它的一些属性:

    width:宽度

    height:高度

    所以在img标签中width/height这两个属性的作用,就是用来告诉img标签将来需要显示图片有多宽多高

    如果img标签没有指定需要显示的图片的宽高,那么系统会按照图片默认的宽高来显示,如果img标签指定了宽高,那么系统会按照指定的宽高来显示

    title:用于告诉浏览器,当鼠标悬停在图片上时,需要弹出的描述框中显示什么内容

    alt:其实是英文alternate的缩写,是“交换,替换”的意思,它的作用就是用于告诉浏览器,当需要显示的图片找不到时显示什么内容

    本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

    展开全文
  • img标签实现background-size:cover(图片拉伸、缩放)等效果 img标签有一个object-fit属性,其值可以设置为cover、contain等和backgr-size也一样的值。 还有另外一个object-position属性可以设置位置,和background-...
  • 一、将图片作为dom元素方案1:给图片周围留白像这样,1:1的图片撑满图片区域,其他比例图片周围留白(粉~):如果图片高度大于宽度,则左右留白,高度小于宽度,上下留白实现代码:1body{margin: 0;...
  • .box4 > div:nth-of-type(1) > img { width: 50%; display: block; height: 100%; object-fit: cover; } 加上 height: 100%; object-fit: cover;Ï
  • img标签 1.img标签中的img其实是英文image的缩写 所以img标签的作用, 就是告诉浏览器我们需要显示一张图片 2.img标签格式: 其实img标签中的src是英文source的缩写 所以img标签中的src就是用来告诉img标签, 需要显示...
  • img标签

    2017-11-16 15:18:06
    img标签 用于显示文字 使用方法: 注意点: img标签不会独占一行 属性: width:图片的宽 height:图片的高度 若不指定图片的宽高,则按照图片的宽高显示,如果指定了宽高,有可能导致图片变形, ...
  • javascript怎么动态更改img标签的src属性? var img_idx=0; var img_list=new Array("手机471.jpg","手机469.jpg"); function next_img(){ img_idx++; img_idx%=img_list.length; return img_list[img_idx]; } 扩展...
  • img标签及属性

    万次阅读 2019-01-16 21:51:00
    一、img标签 1、img标签的作用:用来告诉浏览器我们需要显示一张图片 2、img标签格式:<img src = " xxx.jpg"> -- img标签中的src是英文source的缩写,src 是用来告诉img标签,需要显示的图片名称 3...
  • 在web开发中,作为前端经常会遇到处理图片拉伸问题的情况。例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传时做手动裁切,让...
  • img 标签

    2019-10-07 21:34:51
    img  -- 是图像的标签 src  -- 属性告诉浏览器图片的具体位置,就像连接的 href标签 一样告诉浏览器要链接到的文件,可以用URI表示,URI表示法见 相对路径和绝对路径 alt  -- 图片的替代文字.有些浏览者不想看到...
  • 06-img标签

    2019-09-10 22:21:02
    img src="timg.jpg"> <img src="timg.jpg" width="300" height="478"> <img src="timg.jpg" width="300"> <img src="timg.jpg" height="478"> <img src="timg.jpg" height="478" title=...
  • 前言相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况。例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传...
  • H5 img图片标签及其属性

    万次阅读 2018-10-16 12:12:56
    img:图片(重点) src:图片资源位置 相对目录 .表示当前目录 ..表示上一级目录 绝对目录 window:以盘符开头的目录 类unix:以/开头的目录 ...
  • 1.img标签中的img其实是英文image的缩写,所以img标签的作用,就是告诉浏览器我们需要显示一张图片 2.img标签格式:<img src=" "> img标签名称,src是属性 其实im...
  • 效果如下: ... <div class="content-item"> <a href="#">...img src="../static/images/27.jpg" style="height: 100%"> </a> <div class="content-itemInfo"> </div>
  • 需求:人脸照片展示 说明:cs端上传图片,在web上展示。由于只对图片大小,格式进行判断,而无法控制图片形状。效果如下 ...img class="imgContent userMgrImg" :src="facePicPa...
  • HTML之img图形标签的显示特点

    千次阅读 2018-05-29 22:12:44
    img /&gt;(自关闭标签) 属性: src:图形地址 width:宽度 height:高度 border:边框 align:对齐方式,代表与图片相邻的文本的相对位置(有三个属性值:top middle bottom) alt:图片的文字说明2.width和...
  • HTML中img标签

    2020-06-05 23:45:57
    第一种img方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="./1.jpg" /> <...
  • img标签图片居中显示

    万次阅读 2019-03-12 19:39:27
    直接在img的css中加入 #onlypushimgsrc { position: absolute; width: 100%; height: 100%; object-fit: cover; } object-fit:cover保证图片覆盖容器的宽高 object-fit的其它值 object-fit: fill; ...
  •  1.img标签中的img其实就是英文image的缩写  img标签的作用就是告诉浏览器我们需要显示一张图片。  2.img标签格式:<img src="">  其实img标签中的src是英文source的缩写  所以img标签中的src就是...
  • img标签图片自适应

    千次阅读 2017-03-18 21:13:44
    img{ width: 100%; height: auto;max-width: 100%; display: block; }
  • 在网页布局中引入图片,最常用的两个就是 img 标签和 background 属性了。但何时使用 img 标签,何时使用 backround 背景图像呢? <img>标签定义 HTML 页面中的图像。从技术上讲,<img> 标签并不会在...
  • 好程序员分享该如何选择background-image和img标签,用img标签  如果你希望别人打印页面时候包含这张图片请使用img标签  当这张图片有非常有意义的语义,比如警告图标,请使用img标签及它的alt属性。这样意味着...
  • html中的高级选择器的种类和用法,a标签img标签 伪类选择器

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,192
精华内容 2,076
关键字:

img拉伸标签