4

我需要允许用户上传他们想要的任何像素，但他们的个人资料图片将超过 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/

4

5 回答 5

4

如果您line-height在容器 div 上设置了 a ，则可以vertical-align在图像上使用来定位它。此外，您应该使用max-widthandmax-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;
}
于 2013-01-17T06:38:03.367 回答
4

几件事-

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

其次，我建议使用一个带有 background-image 属性的 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

于 2013-01-17T06:40:22.983 回答
1

只需将widthandheight属性设置img为 100：http: //jsfiddle.net/ZdW9h/4/

不过，以这种方式调整图像大小通常不是最好的主意。如果您可以使用某种图像库（如 GD）调整图像大小，我建议您先这样做。它也会为您节省一些服务器空间。

于 2013-01-17T06:31:56.383 回答
0

这件事应该可以解决您的问题：

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

如果您正在寻找其他东西，请告诉我。

于 2013-01-17T06:35:02.033 回答
0

你可以试试 ：

#imgbox { display:table-cell; }
于 2013-01-17T06:35:50.813 回答