设置 CSS

.container{
overflow:auto;
}
img{
width:100%;
height:auto;
overflow:hidden;
}

设置 template

<div class="container">
<img :src="src">
</div>

设置 script

import src from '../../../assets/image/login/1.jpg'
export default{
data(){
return{
src: src
}
}
}

Css 图片自适应的更多相关文章

  1. CSS 图片自适应容器

    https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...

  2. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  3. html5+css 图片自适应

    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...

  4. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  5. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  6. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  7. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  8. css图片根据div宽高比例自适应

    1.div布局 <div class="card-img-show"> <div class="upload-img-conss" > ...

  9. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

随机推荐

  1. PJzhang:python基础入门的7个疗程-seven

    猫宁!!! 参考链接:易灵微课-21天轻松掌握零基础python入门必修课 https://www.liaoxuefeng.com/wiki/1016959663602400 第19天:开源模块 数据 ...

  2. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  3. python-study-文件操作

    # 一.文件操作的作用 :读取内容.写入内容.备份内容.... # 文件的基本操作,文件操作包含:打开.关闭.读.写.复制.... # 打开 读写 关闭 # 文件备份 # 文件和文件夹的操作 # 总结 ...

  4. Presto 函数开发

    0. 写在前面 Presto Functions 并不能像 Hive UDF 一样动态加载,需要根据 Function 的类型,实现 Presto 内部定义的不同接口,在 Presto 服务启动时进行 ...

  5. Prime Ring Problem--------多重循环用递归来做

    链接:https://vjudge.net/problem/UVA-524 题意:给出正整数n,输出以1开头,由2到n组合的字符序列,使相邻的数相加为素数,最后一个(关键信息为n大于1小于等于16), ...

  6. PHP中interface的用处

    确实,PHP 接口是有它的目的的.   它们是契约,是给其他开发人员的说明手册.然而,还是很难理解接口有什么用.   基础 接口是抽象的类,无法直接实例化,但是可被实现.   这是一个基本的例 int ...

  7. CS231n 斯坦福李飞飞视觉识别课程

    本文是个人在学习<CS231n 斯坦福李飞飞视觉识别课程>的学习笔记. 第一讲:课程简介 课时1 计算机视觉概述 课时2 计算机视觉历史背景 课时3 课程后勤 选读书籍<DeepLe ...

  8. 【laravel】用户认证之----手动认证用户

    模型 如果某个模型类需要用于认证,必须继承自 Illuminate\Foundation\Auth\User 基类,否则会报错.然后在这个模型类中使用 Notifiable Trait,里面提供了用户 ...

  9. 面试题之----禁掉cookie的session使用方案

    方式一:通过 url 传值,把session id附加到url上 缺点:整个站点中不能有纯静态页面,因为纯静态页面session id 将无法继续传到下一页面 方式二:通过隐藏表单,把session ...

  10. RHEL7配置ip地址

    通过修改ifcfg-eno16777728配置文件来修改配置ip 网卡命令格式:eno16777728 en:代表enthernet(以太网) o:代表onboard(内置) 16777728:是主板 ...