CSS固定图片显示大小

分析

假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式

.picture-area {
width: 250px;
height: 300px;
margin: 1em;
}

当然简单如下的html是不能限制图片大小的

<div class=“picture-area”>
<img src=“…” alt=“…”>
</div>

换个思路,将图片作为div的背景图片

<div style=“background-image: url(‘…’)”></div>

此时需要将该div铺满picture-area,因此定义样式

.picture {
position: absolute;
left:;
right:;
top:;
bottom:;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

于是得到限制图片大小的div如下

<div class=“picture-area”>
<div class=“picture” style=“background-image: url(‘…’)”></div>
</div>

由于picture使用了绝对定位,根据w3school上的解释:“生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位”,如果元素没有定义position,默认position为static,因此将父元素picture-area的定位方式设为position:relative即可。

完整的CSS

 .picture-area {

     width: 250px;

     height: 300px;

     margin: 1em auto 1em auto;

     position: relative;

 }

 .picture-area .picture {

     position: absolute;

     left:;

     top:;

     right:;

     bottom:;

     background-repeat: no-repeat;

     background-position: center 36%;

     background-size: cover;

 }

GitHub Pages

Github的每个repository有Github Pages,可以使用Github Pages做静态页面演示。

因此首先在Github上创建一个名为VacationSchedule的repository。

(1) clone项目到本地

git clone https://github.com/zrss/VacationSchedule.git

(2) 进入项目文件夹

cd VacationSchedule

(3) 切换到gh-pages分支,这个分支的文件才被视为Github Pages的文件

git checkout --orphan gh-pages

(4) 在项目文件夹下写web代码即可。目录结构例如:

/VacationSchedule

  /bootstrap

  /css

  /images

  index.html

(5) 提交代码

git commit -a

(6) merge到gh-pages

git push

即可通过http://zrss.github.io/VacationSchedule/查看到web页面效果;一般来说,Github Pages可以通过http://<user_name>.github.io/<repository_name>/来访问。

样式参考:http://xiumi.us

GitHub Pages参考:http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html

FE: CSS固定图片显示大小及GitHub Pages在线演示的更多相关文章

  1. 你想不到的!CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  2. css控制图片自适应大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决.      该CSS的功能是:大于600的图片自动调整为600显示. <style ...

  3. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

  4. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  5. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

  6. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  7. css固定姓名显示长度,排列更整齐

    white-space: nowrap 不换形 overflow: hidden 隐藏长度超出部分 text-overflow:ellipsis  文字长度超出用省略号代替 <p style=& ...

  8. img超出div width时, jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  9. css 固定图片

随机推荐

  1. Vagrant 部署python开发环境

    Vagrant简介 Vagrant是一个基于Ruby的工具,用于创建和部署虚拟化开发环境.它使用Oracle的开源VirtualBox虚拟化系统,使用 Chef创建自动化虚拟环境. 在Windows下 ...

  2. SKSpriteNode类

    继承自 SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject(NSObject) 框架  /System/L ...

  3. 灵活性比Listview更好的RecycleView

    RecycleView:是Android L版本中新添加的一个用来取代ListView的SDK,它的灵活性与可替代性比listview更好. RecyclerView与ListView原理是类似的:都 ...

  4. python安装MySQLdb(Windows环境)

    1.下载 http://www.codegood.com/downloads 我的win7 64位.Python2.7.8版本,所以选择MySQL-python-1.2.3.win-amd64-py2 ...

  5. codevs 1027 姓名与ID

    /* 二分图匹配 建图稍麻烦点 不过 有STL大法带我上天 说正经的 先假设都有关系 然后把确定的没有关系的删掉 这样跑出来的一定是完美匹配 至于确定的匹配嘛 删掉这一条 不再是完美匹配 然后记下排序 ...

  6. HTML标签练习

    <html> <> <body> <h4>一个无序列表:</h4> <ul> <li><a href=&quo ...

  7. python运行时间计算之timeit

    timeit.timeit(stmt='pass', setup='pass', timer=<default timer>, number=1000000) stmt:statement ...

  8. spring源码分析

    编译问题 spring-4.0.5.release编译是用jdk8编译的,为啥可以运行在jdk7的环境? 源码分析 spring源码分析,由一个点各个击破,比如依赖注入,autowired. spri ...

  9. asp.net读取Access数据库。

    注:数据库(表名 job  id 工作id ,job工作字段) 数据库放在app_data文件中.名称为database.mdb 如果用codesmith生成,选择的数据库连接类型如下图: 项目结构图 ...

  10. curl 命令使用

    1.开启gzip请求curl -I http://www.sina.com.cn/ -H Accept-Encoding:gzip,defalte 2.监控网页的响应时间curl -o /dev/nu ...