1. 我们经常会遇到这样的问题,客户给的图片有大有小,集中显示出来会很难看,要么被裁掉,要么被拉伸或压缩,一下提供一种方案,使图片保持原比例:
在原有 <img> 之外再加一层 <div> ,只设置 <img> 的宽度,然后设置 <div> 的高度,多余出来的部分隐藏掉。
<div class="img-div">
<img src="..."></img>
</div>
.img-div {
height: 42vh;
overflow: hidden;
}
.img {
width: 20vh;
}
2. 水平居中
margin: auto auto;
3. 垂直居中
{
height: 50px;
line-height: 50px;
}
4. 图片相关css
background (css3 新添加属性 background-image background-size background-origin background-clip)
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
#example1 {
background-image: url(img_flwr.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}