设置 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. MapReduce之自定义InputFormat

    在企业开发中,Hadoop框架自带的InputFormat类型不能满足所有应用场景,需要自定义InputFormat来解决实际问题. 自定义InputFormat步骤如下: (1)自定义一个类继承Fi ...

  2. Spring当中循环依赖很少有人讲,今天一起来学习!

    网上关于Spring循环依赖的博客太多了,有很多都分析的很深入,写的很用心,甚至还画了时序图.流程图帮助读者理解,我看了后,感觉自己是懂了,但是闭上眼睛,总觉得还没有完全理解,总觉得还有一两个坎过不去 ...

  3. linq介绍及工作中应用两例——左联与内联,linq循环方法

    目录 1 linq介绍 1.1 linq产生背景 1.2 linq使用范围 1.3 linq核心程序集 1.4 linq架构图 1.5 linq使用形式对比 1.5.1 linq To Objects ...

  4. expect正则捕获返回结果

    expect正则捕获返回结果 expect: expect -re "([0-9]*)([a-zA-Z]*)"send_user "num is $expect_out( ...

  5. python unicode和string byte

    python unicode 和string那 开发过程中总是会碰到string, unicode, ASCII, 中文字符等编码的问题, 每次碰到都要现搜, 很是浪费时间, 于是这次狠下心, 一定要 ...

  6. PHPSTORM断点调试配置

    一.安装Xdebug xdebug官方提供了一个非常友好的安装指导: https://xdebug.org/wizard.php 打开上面的网站,将你的phpinfo页面输出的内容复制到表单中,然后点 ...

  7. dp最长不下降序列

    // // Created by snnnow on 2020/4/13. // //这是dp 问题的基础题 // //最长不下降 //(导弹拦截是其例题) //那这篇文章是讲啥呢, // 主要是吧, ...

  8. 配置mongoDB的错误

    1,将启动配置到服务的时候没有反应,后来发现没有用管理员模式打开shell命令,所以没有反应. 2,用管理员模式的时候报错 格式问题,将由空格的路径用“”包住即可 3.启动的时候报错windows不能 ...

  9. luogu P3403 跳楼机 同余最短路

    LINK:跳楼机 很早之前就想学的一个东西.发现这个东西果然神奇. 我们要找到 所有的 w满足 \(w=1+ax+by+cz\).且 \(1\leq w\leq h\) 暴力枚举是不行的. 做法是这样 ...

  10. luogu 3158 [CQOI2011]放棋子

    时隔多日 我又来挑战这道dp. 几个月前给写自闭了.几个月后再来. 首先一个我们能列出来的状态 是以行为转移的 f[i]表示前i行...但是会发现此时列我们控制不了 且棋子的颜色,个数我们也要放到状态 ...