图片 100%显示. img 全部显示.
让每个图片 都铺满 ,同样的大小; 只要给 img 设置 固定的高度, 宽度就可以 了.
-----------------------
html:
1 <div class="content"> 2 3 <div class="course"> 4 <div class="courseImg"><img src="YYFramework/Public/01.png" alt="课程图片"></div> 5 <div class="courseName">计算机</div> 6 <button type="button" class="btn btn-primary courseButton"> 7 <span class="courseButtonWord">进入</span> 8 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 9 </button> 10 </div> 11 12 <div class="course"> 13 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div> 14 <div class="courseName">计算机</div> 15 <button type="button" class="btn btn-primary courseButton"> 16 <span class="courseButtonWord">进入</span> 17 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 18 </button> 19 </div> 20 21 <div class="course"> 22 <div class="courseImg"><img src="YYFramework/Public/02.jpg" alt="课程图片"></div> 23 <div class="courseName">计算机</div> 24 <button type="button" class="btn btn-primary courseButton"> 25 <span class="courseButtonWord">进入</span> 26 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 27 </button> 28 </div> 29 30 <div class="course"> 31 <div class="courseImg"><img src="YYFramework/Public/03.png" alt="课程图片"></div> 32 <div class="courseName">计算机</div> 33 <button type="button" class="btn btn-primary courseButton"> 34 <span class="courseButtonWord">进入</span> 35 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 36 </button> 37 </div> 38 39 <div class="course"> 40 <div class="courseImg"><img src="YYFramework/Public/04.png" alt="课程图片"></div> 41 <div class="courseName">计算机</div> 42 <button type="button" class="btn btn-primary courseButton"> 43 <span class="courseButtonWord">进入</span> 44 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 45 </button> 46 </div> 47 48 <div class="course"> 49 <div class="courseImg"><img src="YYFramework/Public/05.png" alt="课程图片"></div> 50 <div class="courseName">计算机</div> 51 <button type="button" class="btn btn-primary courseButton"> 52 <span class="courseButtonWord">进入</span> 53 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 54 </button> 55 </div> 56 57 <div class="course"> 58 <div class="courseImg"><img src="YYFramework/Public/06.jpg" alt="课程图片"></div> 59 <div class="courseName">计算机</div> 60 <button type="button" class="btn btn-primary courseButton"> 61 <span class="courseButtonWord">进入</span> 62 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 63 </button> 64 </div> 65 66 <div class="course"> 67 <div class="courseImg"><img src="YYFramework/Public/07.jpg" alt="课程图片"></div> 68 <div class="courseName">计算机</div> 69 <button type="button" class="btn btn-primary courseButton"> 70 <span class="courseButtonWord">进入</span> 71 <span class="glyphicon glyphicon-log-in courseButtonIcon"></span> 72 </button> 73 </div> 74 75 76 <div class="clearLeft"></div> 77 </div>
css:
1 /****内容区域*****/ 2 .content { 3 width: 100%; 4 border: 1px solid black; 5 padding: 50px 100px; 6 } 7 8 .course { 9 width: 265px; 10 height: 330px; 11 /*border: 1px solid red;*/ 12 13 margin-right: 60px; 14 /*margin-bottom: 60px;*/ 15 margin-top: 50px; 16 float: left; 17 18 box-shadow: 0px 0px 3px 3px #888888; 19 } 20 21 .courseImg { 22 width: 265px; 23 height: 235px; 24 } 25 26 .courseImg img { 27 width: 265px; 28 height: 235px; 29 } 30 31 .courseName { 32 width: 100%; 33 height: 45px; 34 /*border: 1px solid red;*/ 35 text-align: center; 36 color: #000; 37 font-size: 16px; 38 font-weight: 500; 39 line-height: 45px; 40 41 } 42 43 .courseButton { 44 /*margin: 0px auto;*/ 45 width: 100px; 46 margin-left: 82px; 47 48 49 } 50 51 .courseButtonWord { 52 display: inline-block; 53 width: 50px; 54 font-size: 16px; 55 color: #FFF; 56 text-align: center; 57 /*border: 1px solid red;*/ 58 /*border-right: 1px solid #347FBF;*/ 59 border-right: 1px solid #3984C3; 60 } 61 62 .courseButtonIcon { 63 color: #FFF; 64 } 65 66 .clearLeft { 67 clear: left; 68 }
转载于:https://www.cnblogs.com/cbza/p/6946322.html
图片 100%显示. img 全部显示.相关推荐
- Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
- 关于UIImageView的显示问题——居中显示或者截取图片的中间部分显示
我们都知道在ios中,每一个UIImageView都有他的frame大小,但是如果图片的大小和这个frame的大小不符合的时候会怎么样呢?在默认情况,图片会被压缩或者拉伸以填满整个区域. 通过查看UI ...
- JS file图片即选即得显示,前端交互图片即选即得
<table><tr><td><input type="file" name="sdfFile" id="s ...
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- html5禁止显示相册,手机相册图片莫名被屏蔽,显示“涉嫌违规,系统审查中”半年了...
[分享交流] 手机相册图片莫名被屏蔽,显示"涉嫌违规,系统审查中"半年了 516815 电梯直达 花粉142386990 初窥门径 发表于 2020-1-19 01:57:10 来 ...
- php生成cmyk图片,用ImageMagick创建cmyk颜色的图片,在photoshop中显示的cmyk值不一样!...
各位好!我在php里用ImageMagick创建cmyk颜色的图片,在photoshop中显示的cmyk值不一样!比如:在ImageMagick通过ImagickPixel设置的颜色为cmyk(0,0 ...
- 使用QT实现一个图像处理软件1 —— 图片的加载和显示
为了实现图片的加载和显示,本文主要将使用到Qt中的几个类,分别是: QImage,这是Qt实现的一个存储图片信息的类,支持大部分的图片格式,支持像素操作,后续所有的图像处理算法都将在这个类的基础上进行 ...
- Vue Element UI Image Carousel 在滚动的图片上实现文本的缩略显示与全部显示
文章目录 前言 实现效果 关键代码 源码下载 参考文献 前言 基于 Vue 使用 element ui 的 carousel 和 image 实现图片的滚动,以及文字在图片上缩略显示和全部显示. 实现 ...
- python如何调用图片-python实现读取并显示图片的两种方法
在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. ...
- python界面图片-python实现读取并显示图片方法(不需要图形界面)
在 python 中除了用 opencv,也可以用 matplotlib 和 PIL 这两个库操作图片.本人偏爱 matpoltlib,因为它的语法更像 matlab. 一.matplotlib 1. ...
最新文章
- 《python机器学习经典实例》Expected 2D array, got 1D array instead和Reshape your data either using array.问题(已解决)
- LAMP(4)Apach和php结合、Apache默认虚拟主机
- php formdata 多个图片保存_PHP-FPM是什么?
- 桌面支持--电脑出现临时账户--解决办法
- pandas用众数填充缺失值_python数据分析包|Pandas-02之缺失值(NA)处理
- android9 关闭点击动画,在Android app中实现九(n)宫格图片连续滑动效果
- Myeclipse7.X和8.X汉化
- 春运抢票靠加速包?试试这个 Python 开源项目吧
- 论文评审最大流_毕业论文_最大流问题及其应用(7)(喜欢就下吧)
- CAD制图初学入门:CAD图案填充之图案加洞
- 名称、系统服务-windows系统进程解析 -by小雨
- 志愿者积分兑换小程序开发制作
- 【EPS\AI】12款教师节手绘海报矢量模版素材
- uni-app嵌入其他页面(阿里邮箱为例)
- 2021nian开源SLAM 算法
- 5g理论速度_5G是什么?5G速度有多快?
- MATLAB中classify函数的使用
- gem5集成nvmain
- 【Android】Android自动开关机实现
- 深度解析Linux读写锁逻辑
热门文章
- python不放回抽样_Python实现一个带权无回置随机抽选函数的方法
- 机器学习 社交网络_机器学习从业人员在社交媒体上的自我推广会是什么样子?...
- vue一个页面发出多个异步请求_Vue异步请求最佳实践
- 如何获取ALOS 12.5米高程DEM 数据(2015年左右)
- 半导体物理与器件 第五章—载流子输运现象
- 【圣诞活动】来自神秘人的挑战书!重大线索出炉!
- 深入理解MultipartFile
- 学习git与github
- catiawin10许可证灰色_安装CATIA V5 6R2017 Win64时“许可证管理工具”窗口不弹出解决方案...
- Tachyon架构分析和现存问题讨论