html – 如何将图像放入框中并垂直对齐它

概述我需要允许用户访问他们想要的像素,但是他们的个人资料图片将超过100×100.图片将包含在SQUARE框中. 但问题是,当我上传100×100或类似的尺寸时,它可以正常工作.但是当我上传像素为640×360的图像或任何类似于那种(或宽屏幕)的图像时,图像会很好地缩放到框中,但是,它不是垂直对齐的.我希望垂直对齐在中间,所以我该怎么做？ CSS： #imgbox { height:100px; 我需要允许用户访问他们想要的像素,但是他们的个人资料图片将超过100×100.图片将包含在SQUARE框中.
但问题是,当我上传100×100或类似的尺寸时,它可以正常工作.但是当我上传像素为640×360的图像或任何类似于那种(或宽屏幕)的图像时,图像会很好地缩放到框中,但是,它不是垂直对齐的.我希望垂直对齐在中间,所以我该怎么做？

CSS：

#imgBox {  height:100px;  wIDth:100px;  overflow:hidden;  border:solID 1px #000;  margin-left:10px;  margin-top:10px;}#imgBox img {  wIDth:100%;  position:relative;  //I want the vertical align of the image to be in the center}

这里：http://jsfiddle.net/ZdW9h/1/

解决方法 几件事 –

为imgBox元素使用类,ID用于选择给定文档中的单个元素.

其次,我建议使用一个带背景图像属性的div,这样你就可以相对定位它.

HTML

<div  ></div><div  ></div>

CSS

.imgBox {    height: 100px;    wIDth: 100px;    overflow: hIDden;    border: solID 1px #000;    margin-left: 10px;    margin-top: 10px;    background-repeat: no-repeat;    background-position: center;    background-size: contain;}

JSFiddle

总结

以上是内存溢出为你收集整理的html – 如何将图像放入框中并垂直对齐它全部内容，希望文章能够帮你解决html – 如何将图像放入框中并垂直对齐它所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。