1

我的目标是使我的 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>

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

谢谢达雷尔。

4

4 回答 4

1

要将多个尺寸的图像居中在一个 sized中，请将图像设置为CSSdiv中的背景（居中） - 无需任何元素。然后给div设置一个固定宽度，隐藏溢出。divimg

<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/

于 2013-08-29T22:15:09.777 回答
1

水平居中图像应该很简单，但垂直居中页面元素是一种痛苦。更简洁的解决方案是将图像设置为background-imagediv （或可能是锚标记）并使用其他 css 背景属性来定位它。像：style="background-image: url([url]); background-position: center"应该做的工作。

于 2013-08-29T20:46:46.573 回答
1

这是迄今为止我所知道的最简单的解决方案，你需要两个 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，在这种情况下，我们的图像将是全尺寸但裁剪到我们希望显示的图像的任何位置。

于 2013-08-29T20:52:32.560 回答
1

这是诀窍。将图像水平居中很容易。然而，垂直居中并不是那么容易并且涉及更多的标记。您可以使用背景位置属性。这是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 样式。

于 2013-08-29T21:08:33.080 回答