Question

我的目标是将一个在我的div中更大的图像居中。我不想调整图像大小。必须显示图像的中心。

我的div被定义为：

div.thumbnail 
{
   display: block;
   margin: auto;
   height: 100px;
   width: 100px;
   overflow: hidden;
}

然后我的想法是为图像另外创建这个：

div.thumbnail img 
{
   overflow: hidden;
   margin: auto;
}

HTML看起来像：

<div class="thumbnail">
    <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
        <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
    </a>
</div>

但这对我不起作用。有任何建议如何解决这个问题？

感谢Darrell。

Answer 1

水平居中图像应该是直截了当的，但垂直居中的页面元素是一种痛苦。更清晰的解决方案是将图像设置为div的background-image（或者可能是锚标记），并使用其他css背景属性来定位它。像style="background-image: url([url]); background-position: center"这样的事情应该可以胜任。

Answer 2

这是迄今为止我所知道的最简单的解决方案，你需要两个div来做你想做的事情。像这样：

   <div class="thumbnail">
      <div class="image-container">
        <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
            <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
        </a>
      </div>
    </div>

CSS

   .thumbnail{
     width: 100px;
     height:100px;
     overflow:hidden;
   }
   .image-container{
     width: 100%;
     height: 100%;
     //use the margin property to position the image in the div.
     margin: 0 0 0 0;
   }

我们将缩略图div设置为我们想要的任何大小，并通过使溢出隐藏缩略图中的div，在这种情况下，我们的图像将是全尺寸，但裁剪为我们希望显示的图像的任何位置。

Answer 3

这是诀窍。水平居中图像很容易。然而，垂直居中不是那么容易并且涉及更多标记。您可以使用 background-position 属性。这是jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail">
    <a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
    </a>
</div>

CSS

div.thumbnail {
    display: block;
    margin: auto;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
div.thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
}

当然会产生不良影响。您的图片不会被编入索引，因为它采用的是CSS样式。

Answer 4

要将单个尺寸的div内的多个尺寸的图像居中，请将图像设置为CSS中div的背景（居中） - 无需img元素。然后为div设置一个固定的宽度并隐藏溢出。

<div class="s1"> [ Content ] </div>
<div class="s2"> [ Content ] </div>
<div class="s3"> [ Content ] </div>

div{
    width:300px;
    height:300px;
    overflow:hidden;
}
.s1{
    background:transparent url("http://placehold.it/500x500") center center no-repeat;
}
.s2{
    background:transparent url("http://placehold.it/700x500") center center no-repeat;
}
.s3{
    background:transparent url("http://placehold.it/500x700") center center no-repeat;
}

http://jsfiddle.net/daCrosby/sYgHG/1/

在较小的div中居中一个大图像

4 个答案: