设置 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. nginx一个端口配置多个不同服务映射

    upstream tomcat_server{ server 127.0.0.1:8087; server 192.168.149.117:8088; } server { listen 8088; ...

  2. Python实现性能自动化测试竟然如此简单【颠覆你的三观】

    一.思考 1.什么是性能自动化测试?   性能系统负载能力 超负荷运行下的稳定性 系统瓶颈 自动化测试使用程序代替手工 提升测试效率 性能自动化使用代码模拟大批量用户 让用户并发请求 多页面多用户并发 ...

  3. day10 python之函数的参数

    函数的基本属性 1.1 函数的含义 # 1.功能 :包裹代码,实现功能,达到目的 # 2.特点 :反复调用,提高开发效率,便于代码维护 1.1.2 函数的基本格式 # 函数名 :变量命名规则 # 函数 ...

  4. python怎么自学?今日头条技术大佬的真实经历分享

    大家好,我是武州,27岁,目前在字节跳动担任Python后端工程师一职. (摆拍一下,假装是保安) 在开始今天的文章之前,不知道你们有没有遇到过这样的问题: 大学没学到什么实质技术,毕业后找不到高薪的 ...

  5. JAVA集合二:HashMap和Hashtable

    参考链接: HOW2J.CN HashMap HashMap实现了JAVA的Map接口,类似于C++的STL框架的Map,是存储键值对的数据结构.键(key)是唯一的,但值(value)可以重复,如果 ...

  6. 基于python实现查询ip地址来源

    接口调用方法是在url后面直接加上IP地址. url = 'http://freeapi.ipip.net/218.192.3.42' #中文免费 url2 = 'http://ip-api.com/ ...

  7. java 如何正确的输出集合或者对象的值

    java 如何正确的输出集合或者对象的值 一般out.println(Object) 和 System.out.println(Object),其中输出的都是Object.toString()方法.重 ...

  8. Presto 函数开发

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

  9. DJANGO-天天生鲜项目从0到1-006-首页-内容展示

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  10. PWN头秃之旅 - 4.Retrun-into-libc(攻防世界-level1)

    Retrun-into-libc,也写作Retrun2libc.libc是Linux下的ANSI C的函数库,包含了C语言最基本的库函数. Retrun2libc的前提是NX开启,但ASLR关闭,NX ...