我想在div容器内放置宽度为200px且未知高度的 Profiles 图片 . div为150px x 150px . img应该水平居中,每侧都隐藏着出血 . 我不能让它工作,未知的高度弄乱它,因为img宽度的出现方式取决于高度 . - 横向img将获得更高的宽度以填充高度差并保持img成比例 . 如果是肖像图像,则宽度应为150px作为div ...
观看图片:http://s18.postimage.org/52hfcc5h3/Sk_rmavbild_2012_06_26_kl_19_12_49.png
#profilePicture {
display: block;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#profilePicture img {
min-width: 150px;
min-height: 150px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
position:absolute;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
2 回答
你考虑过使用背景图片吗?这会让事情变得更容易 .
这是小提琴 - > http://jsfiddle.net/haNj3/1/
我想你想做的是this .
我认为在这种情况下不需要使用绝对定位 .