Question

我需要授权用户上传他们想要的像素，但是他们的个人资料图片将超过100x100。图片将包含在SQUARE框中。但问题是，当我上传100x100或类似的尺寸时，它可以正常工作。但是当我上传像素为640x360的图像或任何类似于那种（或宽屏幕）的图像时，图像会很好地缩放到框中，但是，它不是垂直对齐的。我想垂直对齐在中间，所以我该怎么做？

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/

Answer 1

如果您在容器div上设置line-height，则可以使用图片上的vertical-align对其进行定位。此外，您应该使用max-width和max-height来确保图片始终包含在框中（假设这是您想要的）。

http://jsfiddle.net/ZdW9h/7/

这是更新的CSS：

#imgbox {
    height:100px;
    width:100px;
    line-height: 100px;
    overflow:hidden;
    border:solid 1px #000;
    margin-left:10px;
    margin-top:10px;
}
#imgbox img {
    max-width:100%;
    max-height: 100%;
    vertical-align: middle;
}

Answer 2

一些事情 -

为imgbox元素使用类，ID用于选择给定文档中的单个元素。

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

<强> HTML

<div class="imgbox" style="background-image: url(http://plants.montara.com/ListPages/FamPages/showpix/ranunculaS/aqufor_a.JPEG)"></div>
<div class="imgbox" style="background-image: url(http://pictures.inspirationfeed.netdna-cdn.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png)"></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

Answer 3

只需将width上的height和img属性设置为100：http://jsfiddle.net/ZdW9h/4/

以这种方式调整图像大小通常不是最好的主意。如果您可以使用像GD这样的图像库来调整图像大小，我建议先执行此操作。它也会为您节省服务器上的空间。

Answer 4

这件事可以解决你的问题：

 #imgbox img {
  width:100px;
  height: 100px;
  position:relative;    
}

如果您正在寻找其他内容，请告诉我。

Answer 5

您可以尝试：

#imgbox { display:table-cell; }

如何在盒子里面放置图像并垂直对齐它

5 个答案: