设置 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. CCNA - Part7:网络层 - ICMP 应该是你最熟悉的协议了

    ICMP 协议 在之前网络层的介绍中,我们知道 IP 提供一种无连接的.尽力而为的服务.这就意味着无法进行流量控制与差错控制.因此在 IP 数据报的传输过程中,出现各种的错误是在所难免的,为了通知源主 ...

  2. java io流根据url读取图片

    //获取图片大小 public void readFileSize(String url,HttpServletRequest request){ //根路径 File file = new File ...

  3. DJANGO-天天生鲜项目从0到1-003-用户模块-登录

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

  4. R语言基本绘图-plot参数:标题,坐标轴和颜色

    标题 plot(c(1:2,2:4),main = "这是主标题",sub = "这是副标题",xlab = "这是x轴", ylab = ...

  5. Spring中与bean有关的生命周期

    前言 记得以前的时候,每次提起Spring中的bean相关的生命周期时,内心都无比的恐惧,因为好像有很多,自己又理不清楚,然后看网上的帖子,好像都是那么一套,什么beanFactory啊,aware接 ...

  6. python Web项目上线之服务器环境配置

    1.下载安装Xftp 安装成功后,登录服务器用户密码,登录成功后 使用Xftp 将下载好的python解释器linux压缩包放置在服务器根目录下(这里用的是python3.7) 2. 解压压缩包,安装 ...

  7. animation动画汇总(一阶段项目)

    animation 属性 动画属性: 1.animation-name:规定需要绑定到选择器的 keyframe 名称. 2.animation-duration:规定完成动画所花费的时间,以秒或毫秒 ...

  8. 彻底弄懂angularJS表单验证

    常用的表单验证指令 (基本概念) 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" ...

  9. map,reduce,filter基础实现

    #coding=gbk from operator import add # 导入加法 # map 函数名 , 序列对象 print(list(map(str,range(5)))) print(li ...

  10. 什么是 PHP SimpleXML?

    PHP SimpleXML PHP SimpleXML 处理最普通的 XML 任务,其余的任务则交由其它扩展处理. 什么是 PHP SimpleXML? SimpleXML 是 PHP 5 中的新特性 ...