设置 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. 记一次 Microsoft.Bcl.Async 使用经验

    起因: 由于公司项目使用场景存在很多的XP环境,导致使用.NET Framework版本不能大于4.0版本.最近开发新功能时:从nuget上下载一个开源dll(该dll 4.0 版本依赖 Micros ...

  2. 题解 洛谷 P2086 【[NOI2012]魔幻棋盘】

    先考虑只有一维的情况,要求支持区间加和求区间 \(\gcd\),根据 \(\gcd\) 的性质,发现: \[ \gcd(a_1,a_2,a_3,\ldots a_n)=\gcd(a_i,a_2-a_1 ...

  3. 超简单的jq图片上传

    <label class="file_img" for="file_imgs"> <input class="file_imgs&q ...

  4. 两个问题解答、opencv、tensorflow、numpy、matplotlib的基本使用

    开始图像处理的海洋 (1)两个问题的详细解答 在开始畅游opencv.tensorflow的海洋之前,我们这里先要解决两个问题. 1.Jupyter notebook 解决了无法自动跳转到浏览器的问题 ...

  5. Golang获取目录下的文件及目录信息

    一.获取当前目录下的文件或目录信息(不包含多级子目录) func main() {  pwd,_ := os.Getwd() //获取当前目录  //获取文件或目录相关信息  fileInfoList ...

  6. 萌新学渗透系列之Hack The Box_Legacy

    我将我的walkthrough过程用视频解说的形式记载 视频地址https://www.bilibili.com/video/BV1mZ4y1u7jG 一是因为看我视频的后来者应该都是刚入门的新手,视 ...

  7. 蜻蜓点水说说Redis的String的奥秘

    本篇博客参考:掘金Redis小册 敖丙 如果面试官问你,单线程的Redis为什么那么快,你可能脱口而出,因为单线程,避免上下文切换:因为基于内存,比硬盘读写快很多:因为采用的是多路复用网络模型.不管你 ...

  8. Springboot 多数据源配置,结合tk-mybatis

    一.前言 作为一个资深的CRUD工程师,我们在实际使用springboot开发项目的时候,难免会遇到同时使用多个数据库的情况,比如前脚刚查询mysql,后脚就要查询sqlserver. 这时,我们很直 ...

  9. 从包含10个无符号数的字节数组array中选出最小的一个数存于变量MIN中,并将该数以十进制形式显示出来。

    问题 从包含10个无符号数的字节数组array中选出最小的一个数存于变量MIN中,并将该数以十进制形式显示出来. 代码 data segment arrey db 0,1,2,4,6,5,7,9,8, ...

  10. Python time strftime()方法

    描述 Python time strftime() 函数接收以时间元组,并返回以可读字符串表示的当地时间,格式由参数format决定.高佣联盟 www.cgewang.com 语法 strftime( ...