css控制图片上下居中,超出部分隐藏

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
img{
width: 100%;
display: block;
}
div{
width: 600px;
height: 600px;
border: 1px solid red;
text-align: center;
overflow: hidden;
position: relative;
}
img{
position: absolute;
width: 100%;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>

</head>
<body>
<div><img src="img/a.jpg" /></div>
</body>
</html>

时间: 2024-11-07 00:16:27

css控制图片上下居中,超出部分隐藏的相关文章

CSS控制图片缩放或者部分显示

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS控制图片缩放或者部分显示</title> 6 </head> 7 8 <body> 9 <!--图片自动缩放显示:通过设置图片宽来实现--> 10 11 12 <!--第一种:设置图片的宽为屏幕宽度的百分比,实现图片跟随屏幕大小自

用CSS控制图片大小显示的方法

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示. 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height:或者min-width,min-height的CSS属性即可.如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高

CSS控制图片和文字在同一行显示且对齐的3种方法

CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法有3种:1.通过添加css的“vertical-align:middle;”:2.如果图片是背景图片,可以在css中设置背景图片:3.把文字和图片分别放入不同的div中.上面三种方法都可以让图片和文字在同一行显示,下面我们用实例来应用一下. 1.添加上“vertical-align:middle”属

一个CSS控制图片overflow的例子

<html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type='text/

通过css控制图片自动缩放至css定义大小

在文章的内容区中,通常会有图片.如果图片的尺寸过大,常会把页面结构撑得变形. 以前,我采用JS来控制,效果还是不错. 这段时间,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理速度也更高. 方法如下: 程序代码 <div class=”UBBPanel”> <div class=”UBBTitle”> <img src=”images/code.gif” style=”margin:0px 2px -3px 0px” alt=”程序代码”/> 程序

css控制图片与文字对齐

文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明:baseline-将支持valign特性的对象的内容与基线对齐sub-垂直对齐文本的下标super-垂直对齐文本的上标top-将支持valign特性的对象的内容与对象顶端对齐text-top-将支持valign特性的对象的文本与对象顶端对齐middle-将支持valign特性的对象的内容与对象中部对齐bottom-将支

CSS 控制元素 上下左右居中

此文章为转载,目的是自己好参考 左右居中:  #method. -->. margin:0 auto;   效果图: 上下居中:  在介绍方法之前,我先声明一下, 这里的 上下居中法,都是已知 height的,总结分两种情况,1. 具体height 和 2.百分比height,但无论哪种形式的height,应该都可以归为 已知height. 下面说一说,百分比height 的两种需要注意的情景: 情景一:position:absoute; top:0; left:0; width:xx%;hei

CSS控制显示图片的一部分

使用情形:防止反复请求图片资源,我们经常采用一张图片多种效果或内容显示. 假设我有纸张竖直方向的一张图片,竖直y轴方向分别是字母:A,B,C.... 现在分别要显示A.B.C 等字母,我们的CSS可以这么写: 这里图片一个字母所占的width=20px,height=20px; .mar_wordA {     background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent; } .mar_word

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d