截取固定大小图片css,css-使不同大小的图片在固定大小的容器中居中

HTML示例如下：

• 
• 
• 
• 
• 
• 
• 

方法一：

.imgbox{

position: relative;

width: 240px;

height: 240px;

}

.imgbox img{

position: absolute;

top:;

bottom:;

left:;

right:;

margin: auto;

max-width: 100%;

max-height: 100%;

outline: 1px solid #000;

}

说明：imgbox为放置图片的容器，高度和宽度可以设置为任意需要的大小，容器中的图片为绝对定位，使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。

方法二：

.imgbox{

font-size:;

width: 240px;

height: 240px;

line-height: 240px;

text-align: center;

}

.imgbox img{

max-height: 100%;

max-width: 100%;

vertical-align: middle;

outline: 1px solid #000;

}

说明：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。outline可有可无，我是为了清晰显示图片位置才声明的outline。

效果图：(最后两个图片width/height大于容器，均能正常显示)

css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)

容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示:

css未知大小的图片居中

未知大小的图片在指定大小的div盒子中垂直水平居中: 无需要JS

问题：如何在固定大小的DIV层插入N多个图片

这是贴友问的一个问题,具体需求是: 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? 原以为利用overflow属性可以实现,但是测试失败.后来利用div层叠实现了效果. ...

定义了一个UIImageView如何使加载的图片不会失真 UIImageView的Frame值是固定的

定义了一个UIImageView如何使加载的图片不会失真  UIImageView的Frame值是固定的 UIViewContentModeScaleToFill, 缩放内容到合适比例大小 UIVie ...

HTML中使背景图片自适应浏览器大小

由于

标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

css -- 背景图片自适应屏幕大小

由于

标签的图片不能够拉伸, 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个bod ...

psd文件中截取固定大小的图片

1.选择需要操作的图层 使用选框工具, 设置固定大小和固定大小的值,在图层上拉取选区 2.使用移动工具  使用垂直.水平居中 使选择的icon在选区块中间 3.再选择好块区域调整好位置后 使用截取工具 ...

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论.   1.当待垂直居中的DIV高宽为已知时: ...

textarea 在浏览器中固定大小和禁止拖动

HTML 标签 textarea 在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 ...

随机推荐

COJ 0999 WZJ的数据结构(负一)

WZJ的数据结构(负一) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 输入N个模板串Pi和文本串T,输出每个模板串Pi在T ...

Mysql 时间操作

Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度) 1 . 查看当天日期 select current_date(); 2. 查看当天时间 select current_time(); ...

记一次mongodb聚合查询

先说一下场景,产品中用到了简单的表单构造器,开始提供了一系列的控件,例如单行文本框.多行文本框.单选.复选.时间等,之后你可以拖拽控件自己组装你想要的表单……网上有很多的表单构造器,这里就不细说了,可 ...

c# 制作正方形图片

using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...

git 命令详细

git是代码管理工具 github是基于git实现的代码管理平台 git --version 查看git版本 git remote -v 查看clone地址 git init 初始化git //全局设 ...

DirectX11 With Windows SDK--01 DirectX11初始化

前言 由于个人觉得龙书里面第4章提供的Direct3D 初始化项目封装得比较好,而且DirectX SDK Samples里面的初始化程序过于精简,不适合后续使用,故选择了以Init Direct3D ...

Frameworks(不定时更新)

iOS8.4 Frameworks 更新时间:2015年8月17日 Accelerate iOS4.0引入了Accelerate框架,该框架的接口可用于执行数学.大数字以及DSP运算.和开发者个人编写 ...

oracle常用小知识点

alter table us_studies modify enroldate  default to_char(sysdate,'yyyy-mm-dd'); ALTER TABLE QS_QUEUE ...

HTML:5meta标签

一些常用的移动端的meta属性设置

& ...

scrollTop和scrollLeft属性

外层元素的高度值是200px,内层元素的高度值是300px.很明显,“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时,有部分内容会隐没在“外层元素的上边界”之外,scrollTop就等于 ...